如何在 Codeigniter 中将图像添加到分页按钮答案

【问题标题】：How to add image to pagination buttons in Code Igniter如何在 Codeigniter 中将图像添加到分页按钮
【发布时间】：2015-01-15 23:45:49
【问题描述】：

$config['prev_link']='Previous';
                $config['prev_tag_open']='<button type="button" style="border-radius:5px;">';
                $config['prev_tag_close']='</button>';

这是控制器中的代码。现在，我想在这个按钮上添加一个图像，我该怎么做？如果我使用源设置为 base_url('path/to/file.png') 的标签，我只会得到一个带有白色边框的空方块。有什么想法吗，谢谢？

【问题讨论】：

标签： php html css image codeigniter

【解决方案1】：

将按钮放在容器中（让 div）并用 ID 命名

<div id="pagin">
    <button>1</button>
    <button>2</button>
    ..................
    ..................
    <button>10</button>
</div>

现在只需使用下面的脚本。

<script>

    var img = <?= base_url('path/to/file.png'); ?>

    $('#pagin button').html('<img src="+img+" alt="image alt text">');
    // This will display the image on every button

    $('#pagin button:first-child').html('<img src="+img+" alt="image alt text">');
    // This will display the image only on the first button

    $('#pagin button:last-child').html('<img src="+img+" alt="image alt text">');
    // This will display the image only on the last button

    $('#pagin button:nth-child(2)').html('<img src="+img+" alt="image alt text">');
    // This will display the image only on the 2nd button

</script>

【讨论】：

它们在 div 中，但这不适用于第一个和最后一个按钮，因为它们仅在某个点存在 - 如果您在第一页，则不会显示第一个按钮。跨度>

【解决方案2】：

你可以像这样使用 CSS 来做到这一点：

因为你已经在使用内联 css 你可以这样做

$config['prev_link']='Previous';
                $config['prev_tag_open']='<button type="button" style="border-radius:5px;background-image: url("yourimage.png");">';
                $config['prev_tag_close']='</button>';

但是我建议添加一个新类并将 css 属性赋予该类。

$config['prev_link']='Previous';
                    $config['prev_tag_open']='<button type="button" class="pg-prev">';
                    $config['prev_tag_close']='</button>';

CSS 文件

 .pg-prev{
    border-radius:5px;
    background-image: url("yourimage.png");
    }

【讨论】：

【解决方案3】：

没关系，我找到了办法：

$config['next_link']='Next<img src="'.base_url("/resources/images/next.png").'" width=20; height=20; style="vertical-align: middle; margin-left: 5px;"/>';

效果很好，谢谢大家的关注。

【讨论】：