如何使用 Bootstrap 为 html 表创建分页答案

【问题标题】：How to create pagination for html table with Bootstrap如何使用 Bootstrap 为 html 表创建分页
【发布时间】：2014-01-26 21:02:05
【问题描述】：

我有一个 html 表，需要使用 Bootstrap 库和 JQuery 为其创建分页。

<table class="table table-bordered table-condensed">
     <thead>
     <tr>
       @foreach (System.Data.DataColumn column in Model.Columns) 
        {
           <th>@column.ColumnName</th>
        }
       </tr>
      </thead>
      <tbody>
       @foreach (System.Data.DataRow row in Model.Rows)
       {
          <tr>
          @foreach (System.Data.DataColumn column in Model.Columns)
          {
              <td>@row[column].ToString()</td>   
          }
          </tr>                             
        }
        </tbody>
</table>

我需要为表格中的每 20 个项目分页。应该编号。谢谢

【问题讨论】：

如果你能负担得起另一个插件，请查看 Datatables.js。它允许您做的不仅仅是简单的分页。
Robert 该网站没有给出带有 html 表格的示例。史密斯我需要它的引导程序。

标签： jquery html asp.net-mvc twitter-bootstrap pagination

【解决方案1】：

当我对包含很多元素的表格进行分页时，我在网站上使用 jPaginate - 给表格主体一个 id，然后像这样运行 .jPaginate()

$('#your_id').jPaginate();

您可能可以对@Robert Harvey 提到的引导程序执行相同的操作，它可能也更新了一些。

编辑改变一些处理分页的插件的样式应该不需要太多，大多数时候您可以替换它们提供的类名，删除它们的 css 并改用引导分页 css 类。

【讨论】：