文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >按项目数在JQuery中分页

问按项目数在JQuery中分页
EN

Stack Overflow用户
提问于 2016-06-27 11:06:17
回答 3查看 72关注 0票数 0

我有一个带有id "display“的HTML表，我想使用JQuery对其进行分页。HTML表的代码如下所示

代码语言：javascript
复制
<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和DataTable API。

代码语言：javascript
复制
<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>

这是我编写的Jquery脚本，用于在head标记中显示每页的项。

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

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

我不知道我哪里出了问题。

谢谢你的帮助

datatables
jquery
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-06-27 11:37:55

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

JQuery:

代码语言：javascript
复制
$(document).ready(function(){
    $('#display').DataTable();
});

HTML:

代码语言：javascript
复制
<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>
票数 0
EN

Stack Overflow用户

发布于 2016-06-27 11:33:30

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

iDisplayLength记录在这里：http://legacy.datatables.net/usage/options。请注意，这是“遗留”。

您正在使用的代码是一个较晚的版本，因此我建议查看以下内容：

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

仅仅用pageLength代替pageLength就足够了。

票数 0
EN

Stack Overflow用户

发布于 2016-06-27 11:37:09

​

代码语言：javascript
复制
$(document).ready(function() {
    $('#example').DataTable();
} );
代码语言：javascript
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/38052366

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档