DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。
主要功能
分页,即时搜索和排序
几乎支持任何数据源:DOM, javascript, Ajax 和 服务器处理
支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
各式各样的扩展: Editor, TableTools, FixedColumns ……
丰富多样的option和强大的API
支持国际化
超过2900+个单元测试
免费开源 ( MIT license )! 商业支持
更多特性请到官网查看
这里主要讲一下DataTable使用Ajax来获取数据并且动态加载dom的方法。这样也方便了数据管理,也避免了HTML页面中大量的tr,看起来很凌乱。
显示效果
源文件
首先需要引入dataTables的源文件:
CSS:http://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css
JS: http://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js
使用
HTML
只需要定义一个table,给一个唯一的标志(id或者唯一的class);
<table class="table table-bordered table-striped" id="dailyTable"></table>
JS
在页面元素渲染完成之后,获取table,使用dataTables对其操作。
ajax是数据的url,这里用的本地数据,使用的是相对路径。当然,也可以使用HTTP请求
columns是一个数组,定义的是表格的标题,数组有多少个界面就会显示多少。格式必须是{title:“xxx”}
$(document).ready(function($) { $('#dailyTable').DataTable({ ajax: "../json/tableData.json", columns: [{ title: "Rendering engine" }, { title: "Browser" }, { title: "Platform(s)" }, { title: "Engine version" }, { title: "CSS grade" }] }); });
JSON
这里数据太多,只说明一下格式。
json数据格式为二维数组,其数据需要被包裹在"data"字段下面。每个二维数组的数据按照js中的title顺序依次排列。
{ "data": [ [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ], [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ] ] }
以上所述是小编给大家介绍的DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
- BootstrapTable refresh 方法使用实例简单介绍
- Bootstrap table中toolbar新增条件查询及refresh参数使用方法
- BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
- Bootstrap的Refresh Icon也spin起来
- bootstrap select2插件用ajax来获取和显示数据的实例
- 使用vue框架 Ajax获取数据列表并用BootStrap显示出来
- Bootstrap进度条与AJAX后端数据传递结合使用实例详解
- bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
- 使用Bootstrap Tabs选项卡Ajax加载数据实现
- bootstrapTable+ajax加载数据 refresh更新数据
- ListView动态加载数据分页(使用Handler+线程和AsyncTask两种方法)
- 利用js将ajax获取到的后台数据动态加载至网页中的方法
- 点击添加按钮,使用ajax动态添加一行和移除一行,并且序号重新排序和数据不重复操作判断
- 前台使用ajax动态获取数据并且显示在页面上,SSM框架二级联动
- 带有分页排序功能的表格插件的使用(通过ajax获取后台数据)
- DataTables+BootStrap组合Ajax数据使用方法(排序,过滤,分页等)
- JS使用ajax从xml文件动态获取数据显示的方法
- JS使用ajax从xml文件动态获取数据显示的方法
- ListView动态加载数据分页(使用Handler+线程和AsyncTask两种方法)
- ListView动态加载数据分页(使用Handler+线程和AsyncTask两种方法)
- ListView动态加载数据分页(使用Handler+线程和AsyncTask两种方法)
- js加载之使用DOM方法动态加载Javascript文件
- 两种不使用过滤驱动从驱动获取数据的方法
- 使用Mono Cecil 动态获取运行时数据 (Atribute形式 进行注入 用于写Log) [此文报考 xxx is declared in another module and needs to be imported的解决方法]-摘自网络
- MVC4中AJAX Html页面打开调用后台方法实现动态加载数据库中的数据
- 分页解决方案 之 QuickPager的使用方法(PostBack分页、自动获取数据)
- 按照过滤条件、排序语句、起始位置和每页条数获取分页数据
- 使用ajax()方法加载服务器数据
- 【转】bootstrap模态框(modal)使用remote方法加载数据,只能加载一次的解决办法
- 分页解决方案 之 QuickPager的使用方法(PostBack分页、自定义获取数据)