Twitter引导表分页 [英] Twitter bootstrap table pagination

问题描述

我目前正在自引导表中工作。它工作正常，好目前我有分页问题。我试图将数据动态地推入表中，一旦数据变得太大，表会向下扩展。我如何对表进行分页？

I am currently working on tables in bootstrap. It is working fine and good. Currently I have a problem with pagination. I am trying to push the data dynamically into the table, once the data became too large the table is expanding downwards..How can I make a pagination to the table?

推荐答案

如果要使用带有Bootstrap的Datatables，您需要初始化它：

If you want to use Datatables with Bootstrap you need to initialize it:

/* 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" ]
                                        } ]
                                    });
                });

然后创建表：

 <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>

，不要忘记包含这个文件： http://datatables.net/media/blog/bootstrap_2/DT_bootstrap.js

and do not forget to include this file: http://datatables.net/media/blog/bootstrap_2/DT_bootstrap.js

这是基于此处的帖子

这篇关于Twitter引导表分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！