按JQuery中的项目数分页项目

时间：2016-06-27 11:06:18

标签： jquery datatables

我有一个带有id“display”的HTML表，我希望使用JQuery进行分页。 HTML表的代码如下所示

<table id="display">
    <tr>
        <td class="cols">
            <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace
        </td>
        <td class="cols">
            <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace
        </td>
        <td class="cols">
            <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace
        </td>
    </tr>
    <tr>
        <td class="cols">
            <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace
        </td>
        <td class="cols">
            <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace
        </td>
        <td class="cols">
            <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace
        </td>
    </tr>
    <tr>
        <td class="cols">
            <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace
        </td>
        <td class="cols">
            <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace
        </td>
        <td class="cols">
            <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace
        </td>
    </tr>
    <tr>
        <td class="cols">
            <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace
        </td>
        <td class="cols">
            <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace
        </td>
        <td class="cols">
            <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace
        </td>
    </tr>
</table>

在标签中，我已经包含了Jquery Libray和DataTable API。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">     </script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>

这是我为在head标签内显示每页项目而编写的Jquery脚本

<script type="text/javascript">
    $(document).ready(function(){
        $('#display').DataTable({
            "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
            "iDisplayLength": 5
        });
    });
</script>

当我运行此代码时，该表不会分页，也不显示用于更改项目数的选择框。

我不确定我哪里出错了。

感谢您的帮助

3 个答案:

答案 0 :(得分：0)

可能您在最新的数据表实现中使用遗留选项。

此处记录了

iDisplayLength：http://legacy.datatables.net/usage/options。请注意，这是＆＃34;遗产＆＃34;。

您使用的代码是更高版本，因此我建议您查看以下内容：

https://datatables.net/reference/option/pageLength https://datatables.net/reference/option/paging

将iDisplayLength替换为pageLength可能就足够了。

答案 1 :(得分：0)

$(document).ready(function() {
    $('#example').DataTable();
} );
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Salary</th>
            </tr>
        </tfoot>
        <tbody>
             <tr>
        <td class="cols">
            <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace
        </td>
        <td class="cols">
            <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace
        </td>
        <td class="cols">
            <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace
        </td>
    </tr>
    <tr>
        <td class="cols">
            <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace
        </td>
        <td class="cols">
            <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace
        </td>
        <td class="cols">
            <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace
        </td>
    </tr>
    <tr>
        <td class="cols">
            <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace
        </td>
        <td class="cols">
            <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace
        </td>
        <td class="cols">
            <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace
        </td>
    </tr>
    <tr>
        <td class="cols">
            <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace
        </td>
        <td class="cols">
            <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace
        </td>
        <td class="cols">
            <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace
        </td>
    </tr>
        </tbody>
    </table>

答案 2 :(得分：0)

您还需要使用thead tfoot和tbody，否则初始化将失败。请注意，thead和tfoot需要与tbody相同的列数。

<强> JQuery的： 

$(document).ready(function(){
    $('#display').DataTable();
});

<强> HTML： 

<table id="display">
    <thead>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td class="cols">
                <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace
            </td>
            <td class="cols">
                <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace
            </td>
            <td class="cols">
                <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace
            </td>
        </tr>
        <tr>
            <td class="cols">
                <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace
            </td>
            <td class="cols">
                <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace
            </td>
            <td class="cols">
                <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace
            </td>
        </tr>
        <tr>
            <td class="cols">
                <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace
            </td>
            <td class="cols">
                <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace
            </td>
            <td class="cols">
                <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace
            </td>
        </tr>
        <tr>
            <td class="cols">
                <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace
            </td>
            <td class="cols">
                <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace
            </td>
            <td class="cols">
                <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace
            </td>
        </tr>
    </tbody>
</table>
相关问题
最新问题