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

扎努

有人可以给我展示一个使用Bootstrap和AngularJS创建表列的示例吗?

  • 种类
  • 搜索
  • 编辑
  • 分页
faulix90

您可以使用以下代码(代替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/

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何对使用UI Bootstrap分页进行分页的AngularJS中的所有记录进行排序和筛选

来自分类Dev

AngularJS + Bootstrap分页

来自分类Dev

Bootstrap AngularJS

来自分类Dev

使用bootstrap / angularjs的可编辑ComboBox

来自分类Dev

使用bootstrap / angularjs的可编辑ComboBox

来自分类Dev

如何使用ngrepeat和bootstrap ui使用angularjs创建分页?

来自分类Dev

使用angularJS进行Bootstrap-Tour

来自分类常见问题

在Bootstrap中对表行进行排序

来自分类Dev

使用AngularJS对表行进行排序

来自分类Dev

如何删除UI Bootstrap Datepicker页脚AngularJS

来自分类Dev

如何使用AngularJS使用Bootstrap警报

来自分类Dev

如何验证Bootstrap 3 angularJS表单?

来自分类Dev

angularjs + ui.bootstrap分页总页数错误

来自分类Dev

AngularJS-ui-bootstrap分页。在单页上隐藏按钮

来自分类Dev

本机Bootstrap与Angularjs Bootstrap指令

来自分类Dev

如何使用AngularJS而不是在查询子句中按两列的差异对表进行排序?

来自分类Dev

Bootstrap模态和AngularJS

来自分类Dev

AngularJs中的Bootstrap Navbar

来自分类Dev

使用Bootstrap 3和AngularJS进行多选下拉列表?

来自分类Dev

使用ui.bootstrap和AngularJS进行多次折叠

来自分类Dev

使用AngularJS和Jade在navbar中进行Bootstrap下拉

来自分类Dev

如何从AngularJS中正确打开和关闭Bootstrap模式

来自分类Dev

如何为ui-bootstrap datepicker创建angularJs包装指令?

来自分类Dev

如何在AngularJS Bootstrap Colorpicker中使用事件

来自分类Dev

AngularJS UI Bootstrap:如何垂直居中模态组件?

来自分类Dev

Angularjs / Bootstrap-如何创建无状态按钮

来自分类Dev

如何在angularjs或bootstrap中使用清单框

来自分类Dev

如何将数据从AngularJS列表传递到Bootstrap模态?

来自分类Dev

如何在angularjs / bootstrap中显示HTML文本?

Related 相关文章

  1. 1

    如何对使用UI Bootstrap分页进行分页的AngularJS中的所有记录进行排序和筛选

  2. 2

    AngularJS + Bootstrap分页

  3. 3

    Bootstrap AngularJS

  4. 4

    使用bootstrap / angularjs的可编辑ComboBox

  5. 5

    使用bootstrap / angularjs的可编辑ComboBox

  6. 6

    如何使用ngrepeat和bootstrap ui使用angularjs创建分页?

  7. 7

    使用angularJS进行Bootstrap-Tour

  8. 8

    在Bootstrap中对表行进行排序

  9. 9

    使用AngularJS对表行进行排序

  10. 10

    如何删除UI Bootstrap Datepicker页脚AngularJS

  11. 11

    如何使用AngularJS使用Bootstrap警报

  12. 12

    如何验证Bootstrap 3 angularJS表单?

  13. 13

    angularjs + ui.bootstrap分页总页数错误

  14. 14

    AngularJS-ui-bootstrap分页。在单页上隐藏按钮

  15. 15

    本机Bootstrap与Angularjs Bootstrap指令

  16. 16

    如何使用AngularJS而不是在查询子句中按两列的差异对表进行排序?

  17. 17

    Bootstrap模态和AngularJS

  18. 18

    AngularJs中的Bootstrap Navbar

  19. 19

    使用Bootstrap 3和AngularJS进行多选下拉列表?

  20. 20

    使用ui.bootstrap和AngularJS进行多次折叠

  21. 21

    使用AngularJS和Jade在navbar中进行Bootstrap下拉

  22. 22

    如何从AngularJS中正确打开和关闭Bootstrap模式

  23. 23

    如何为ui-bootstrap datepicker创建angularJs包装指令?

  24. 24

    如何在AngularJS Bootstrap Colorpicker中使用事件

  25. 25

    AngularJS UI Bootstrap:如何垂直居中模态组件?

  26. 26

    Angularjs / Bootstrap-如何创建无状态按钮

  27. 27

    如何在angularjs或bootstrap中使用清单框

  28. 28

    如何将数据从AngularJS列表传递到Bootstrap模态?

  29. 29

    如何在angularjs / bootstrap中显示HTML文本?

热门标签

归档