bootstrapfootTable资源-CSDN文库

共173个文件

js：61个

html：43个

css：25个

需积分: 5 196 浏览量 2016-02-05 11:59:33 上传评论 1 收藏 2.33MB ZIP 举报

Bootstrap Footable是一款基于Bootstrap框架的高级表格插件，它提供了丰富的功能，如排序、过滤、分页和自定义样式，使网页中的数据展示更加高效和美观。在本实例中，我们将深入探讨Footable如何实现表格的分页功能，并提供完整的代码示例。要使用Footable，你需要在HTML文件中引入必要的库。这包括Bootstrap的CSS和JS文件，以及Footable的核心JS和CSS文件。例如： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap FootTable 分页示例</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <link rel="stylesheet" href="footable.core.min.css"> </head> <body>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <script src="footable.min.js"></script> <script src="footable.filter.min.js"></script> <script src="footable.paginate.min.js"></script> <script> // 初始化和配置Footable $(function () { $('table').footable(); }); </script> </body> </html> ``` 在HTML表格部分，你可以创建一个基本的Bootstrap表格，添加`data-footable`属性来激活Footable功能： ```html <table class="table table-striped" data-page-size="10"> <thead> <tr> <th data-toggle="true">列1</th> <th data-hide="phone,tablet">列2</th> <th data-sort-ignore="true">列3</th> </tr> </thead> <tbody>  </tbody> </table> ``` `data-page-size="10"`指定了每页显示的行数。`data-toggle`, `data-hide`, 和 `data-sort-ignore` 属性则分别用于控制列的排序、在不同设备上隐藏和忽略排序。接下来，你需要填充表格数据。数据可以是静态的，也可以动态加载。这里我们假设数据已经在JavaScript中定义： ```javascript var data = [ { "Column1": "Value1", "Column2": "Value2", "Column3": "Value3" }, // 更多数据... ]; $(document).ready(function () { $('table').footable().init(); // 填充数据 $.each(data, function (index, item) { $('table tbody').append('<tr><td>' + item.Column1 + '</td><td>' + item.Column2 + '</td><td>' + item.Column3 + '</td></tr>'); }); }); ``` Footable会自动处理分页，你可以通过底部的导航栏来切换页面。如果你想自定义分页样式或行为，可以使用Footable提供的事件和API。例如，`footable.page-changing`事件可以在用户切换页面时触发： ```javascript $('table').on('footable.page-changing', function (e) { console.log('即将切换到第 ' + e.nextPage + ' 页'); }); ``` Footable还支持通过AJAX动态加载数据。只需在表格中添加`data-source`属性，指定数据的URL，Footable会在需要时自动请求数据： ```html <table class="table table-striped" data-page-size="10" data-source="your-data-url">  </table> ``` 在这个例子中，`your-data-url`应该返回一个包含表格数据的JSON数组。 Footable会自动处理分页请求和结果解析。 Bootstrap FootTable通过与Bootstrap的完美融合，提供了强大的表格功能，包括分页、排序和过滤。在实际项目中，根据需求配置和扩展Footable，可以轻松地管理大量的表格数据，提升用户体验。

资源推荐

资源详情

资源评论

收起资源包目录

bootstrap footTable （173个子文件）

footable.standalone.css 19KB

footable.core.standalone.css 16KB

footable.standalone.min.css 16KB

FooTable.NoBootstrap.css 13KB

footable.bootstrap.css 6KB

jsdoc-default.css 6KB

footable.bootstrap.min.css 5KB

docs.css 5KB

prism.css 5KB

footable.core.bootstrap.css 4KB

FooTable.css 2KB

prettify-tomorrow.css 2KB

index.css 2KB

prettify-jsdoc.css 1KB

FooTable.Filtering.css 1KB

footable.filtering.css 1KB

footable.filtering.min.css 1KB

FooTable.Glyphicons.css 1KB

FooTable.FontAwesome.css 1KB

FooTable.Paging.css 644B

footable.paging.css 644B

FooTable.Sorting.css 616B

footable.sorting.css 616B

footable.sorting.min.css 545B

footable.paging.min.css 541B

OpenSans-LightItalic-webfont.eot 20KB

OpenSans-Italic-webfont.eot 20KB

OpenSans-BoldItalic-webfont.eot 20KB

OpenSans-Regular-webfont.eot 19KB

OpenSans-Bold-webfont.eot 19KB

OpenSans-Light-webfont.eot 19KB

.gitattributes 66B

.gitignore 1KB

FooTable.Filtering.html 159KB

FooTable.Table.html 144KB

FooTable.Paging.html 136KB

FooTable.Breakpoints.html 102KB

FooTable.Sorting.html 101KB

FooTable.is.html 90KB

FooTable.Columns.html 81KB

getting-started.html 73KB

FooTable.Rows.html 68KB

FooTable.Query.html 66KB

FooTable.Cell.html 64KB

FooTable.Column.html 62KB

FooTable.DateColumn.html 58KB

FooTable.arr.html 57KB

FooTable.ClassFactory.html 50KB

FooTable.Row.html 50KB

FooTable.NumberColumn.html 46KB

FooTable.str.html 43KB

FooTable.Filter.html 32KB

FooTable.Component.html 29KB

jQuery.html 25KB

filtering.html 25KB

row-toggle.html 25KB

FooTable.Pager.html 21KB

FooTable.Class.html 21KB

no-header.html 16KB

single-header.html 16KB

jQuery.fn.html 16KB

FooTable.html 15KB

hiding-columns.html 15KB

paging.html 14KB

FooTable.Sorter.html 14KB

FooTable.Breakpoint.html 13KB

sorting.html 12KB

filtering.html 10KB

sorting.html 10KB

date.html 9KB

FooTable.Defaults.html 7KB

ajax.html 6KB

showcase.html 5KB

paging.html 5KB

index.html 5KB

index.html 4KB

footable.js 183KB

footable.core.js 112KB

jquery.min.js 94KB

footable.min.js 54KB

prism.js 48KB

footable.filtering.js 32KB

footable.core.min.js 32KB

footable.paging.js 22KB

FooTable.Filtering.js 18KB

FooTable.Paging.js 17KB

footable.sorting.js 16KB

FooTable.Table.js 15KB

prettify.js 13KB

FooTable.Columns.js 11KB

footable.filtering.min.js 10KB

FooTable.Row.js 10KB

FooTable.Breakpoints.js 10KB

FooTable.Sorting.js 9KB

FooTable.Class.js 9KB

FooTable.Cell.js 8KB

footable.paging.min.js 8KB

FooTable.Rows.js 7KB

FooTable.Query.js 7KB

demo-rows.js 7KB

共 173 条

评论收藏

内容反馈

麦兜兜米糖

粉丝: 4
资源: 31

bootstrap footTable

最新资源