Bootstrap + AngularJS - 如何排序/搜索/编辑/分页表列

Question

有人可以向我展示使用Bootstrap和AngularJS创建带

的表列的示例

• 排序
• 搜索
• 编辑
• 分页

Answer 1

您可以使用以下代码（而不是json数据，您只需将数据直接放在表格中）：

<table id="resultTable" 
    data-toggle="table" 
    data-url="json.php" 
    data-show-refresh="true" 
    data-show-toggle="true" 
    data-show-columns="true" 
    data-search="true" 
    data-select-item-name="toolbar1" 
    data-pagination="true">
  <thead>
    <tr>
      <th data-field="id" data-align="right" data-sortable="true">Item ID</th>
      <th data-field="column1" data-sortable="true">Column1</th>
    </tr>
  </thead>
</table>

所以你要找的是data-search="true"（搜索）和data-pagination="true"（分页）以及data-sortable="true"（排序）。

对于编辑，我认为你需要使用像这样的附加插件：https://mindmup.github.io/editable-table/