Javascript Twitter引导表分页

我目前正在bootstrap中处理表。它工作得很好。目前我有一个分页问题。我正在尝试将数据动态推送到表中，一旦数据变得太大，表就会向下扩展。如何对表进行分页？

也许您应该检查DataTables分页插件（它们提供引导标记）：

官方文件：

另一种方法是使用bootstrap的Tab特性（倒置），用条件语句划分表

---

如果要将数据表与引导一起使用，则需要对其进行初始化：

/* Table initialisation */
$(document)
        .ready(
                function() {
                    $('.dataTable')
                            .dataTable(
                                    {
                                        "sDom" : "<'row-fluid'<'span2 offset1'l><'span4 offset1'f>r>t<'row-fluid'<'span2 offset1'i><'span6 offset1'p>>",
                                        "sPaginationType" : "bootstrap",
                                        "oLanguage" : {
                                            "sLengthMenu" : "_MENU_",
                                            "sInfo" : "_START_ / _END_  (_TOTAL_)"
                                        },
                                        // Disable sorting on the no-sort class
                                        "aoColumnDefs" : [ {
                                            "bSortable" : false,
                                            "aTargets" : [ "no-sort" ]
                                        } ]
                                    });
                });

/*表格初始化*/
$（文件）
.准备好了吗(
函数（）{
$（“.dataTable”）
.数据表(
{
“sDom”：“t”，
“sPaginationType”：“引导程序”，
“语言”：{
“长菜单”：“\u菜单”，
“sInfo”：“\u开始\u/结束\u（\u总计）”
},
//禁用“无排序”类上的排序
“aoColumnDefs”：[{
“可移植”：错误，
“目标”：[“无排序”]
} ]
});
});

然后创建表：

 <div class="row-fluid">
  <div class="span12">
   <hr class="soften">
   <table id="rules" class="table table-hover dataTable">
    <thead>
     <tr>
      <th class="no-sort"><input id="checkboxListToggle" type="checkbox" class="markAll no-sort" /></th>
      <th>ID</th>
     </tr>
    </thead>
    <tbody>
   </tbody>
   </table>

身份证件

不要忘记包含此文件：

这是基于post可用的解决方案 DataTables 1.10完全支持Twitter引导程序3。除了jQuery、dataTables和bootstrap文件之外，您只需要包括（

dataTables.bootstrap.css

和

dataTables.bootstrap.js

）

演示 有关代码和演示，请参见下面的示例。

$（文档）.ready（函数（）{
$（“#示例”）.DataTable（）；
});

名称
位置
办公室
年龄
开始日期
薪水
名称
位置
办公室
年龄
开始日期
薪水
老虎尼克松
系统架构师
爱丁堡
61
2011/04/25
$320,800
加勒特温特斯
会计
东京
63
2011/07/25
$170,750
阿什顿考克斯
初级技术作者
旧金山
66
2009/01/12
$86,000
塞德里克·凯利
高级Javascript开发人员
爱丁堡
22
2012/03/29
$433,060
佐藤航空
会计
东京
33
2008/11/28
$162,700
布里尔·威廉姆森
集成专家
纽约
61
2012/12/02
$372,000
赫罗德·钱德勒
营业员
旧金山
59
2012/08/06
$137,500
罗娜·戴维森
集成专家
东京
55
2010/10/14
$327,900
科琳赫斯特
Javascript开发人员
旧金山
39
2009/09/15
$205,500
索尼娅·弗罗斯特
软件工程师
爱丁堡
23
2008/12/13
$103,600
杰娜·盖恩斯
办公室经理
伦敦
30
2008/12/19
$90,560
奎因·弗林
支撑导线
爱丁堡
22
2013/03/03
$342,000
查尔德·马歇尔
区域主任
旧金山
36
2008/10/16
$470,600
海莉·肯尼迪
高级市场设计师
伦敦
43
2012/12/18
$313,500
塔蒂亚娜·菲茨帕特里克
区域主任
伦敦
19
2010/03/17
$385,750
迈克尔·席尔瓦
营销设计师
伦敦
66
2012/11/27
$198,500
柏德
首席财务官（CFO）
纽约
64
2010/06/09
$725,000
格洛丽亚·利特尔
系统管理员
纽约
59
2009/04/10
$237,500
布拉德利·格里尔
软件工程师
伦敦
41
2012/10/13
$132,000
戴里奥斯
人事领导
爱丁堡
35
2012/09/26
$217,500
杰内特·考德威尔
开发领导
纽约
30
2011/09/03
$345,000
尤里浆果
首席营销官（CMO）
纽约
40
2009/06/25
$675,000
凯撒万斯
售前支持
纽约
21
2011/12/12
$106,450
多丽丝·怀尔德
营业员
西德尼
23
2010/09/20
$85,600
当归
首席执行官（CEO）
伦敦
47
2009/10/09
$1,200,000
加文·乔伊斯
开发商
爱丁堡
42
2010/12/2