DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)


Posted in Javascript onNovember 09, 2016

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+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)

源文件

首先需要引入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的方法(排序,过滤,分页等),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
关于使用runtimeStyle属性问题讨论文章
Mar 08 Javascript
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
Feb 25 Javascript
javascript 闭包
Sep 15 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
Apr 25 Javascript
js自动下载文件到本地的实现代码
Apr 28 Javascript
javascript不可用的问题探究
Oct 01 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
Dec 26 Javascript
基于Javascript实现返回顶部按钮
Feb 29 Javascript
jQuery中$.each()函数的用法引申实例
May 12 Javascript
JavaScript实现快速排序的方法分析
Jan 10 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
Jul 26 Javascript
vue.js iview打包上线后字体图标不显示解决办法
Jan 20 Javascript
jquery插件bootstrapValidator数据验证详解
Nov 09 #Javascript
jQuery之动画效果大全
Nov 09 #Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
Nov 09 #Javascript
jQuery Ztree行政地区树状展示(点击加载)
Nov 09 #Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
Nov 09 #Javascript
使用 bootstrap modal遇到的问题小结
Nov 09 #Javascript
H5移动端图片压缩上传开发流程
Nov 09 #Javascript
You might like
PHP 编程的 5个良好习惯
2009/02/20 PHP
php 正则 过滤html 的超链接
2009/06/02 PHP
php学习笔记 面向对象的构造与析构方法
2011/06/13 PHP
php中常见的sql攻击正则表达式汇总
2014/11/06 PHP
php获取百度收录、百度热词及百度快照的方法
2015/04/02 PHP
jquery ajax 同步异步的执行 return值不能取得的解决方案
2012/01/08 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
2013/10/12 Javascript
理解Javascript闭包
2013/11/01 Javascript
jquery插件jquery倒计时插件分享
2013/12/27 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
2014/12/15 Javascript
AngularJS基础 ng-copy 指令实例代码
2016/08/01 Javascript
详解nodejs的express如何自动生成项目框架
2017/07/12 NodeJs
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
2019/05/30 NodeJs
JS查找孩子节点简单示例
2019/07/25 Javascript
layer.open 获取不到表单信息的解决方法
2019/09/26 Javascript
vue用elementui写form表单时,在label里添加空格操作
2020/08/13 Javascript
js实现删除json中指定的元素
2020/09/22 Javascript
[02:54]DOTA2亚洲邀请赛 VG战队出场宣传片
2015/02/07 DOTA
Python标准库之循环器(itertools)介绍
2014/11/25 Python
Python实现抓取页面上链接的简单爬虫分享
2015/01/21 Python
python模块导入的细节详解
2018/12/10 Python
python统计中文字符数量的两种方法
2019/01/31 Python
Python爬虫之Selenium中frame/iframe表单嵌套页面
2020/12/04 Python
HTML5新增form控件和表单属性实例代码详解
2019/05/15 HTML / CSS
Under Armour美国官网:美国知名高端功能性运动品牌
2016/09/05 全球购物
凯特方迪化妆品官网:Kat Von D Beauty
2016/11/15 全球购物
数字化校园建设方案
2014/05/03 职场文书
副职竞争上岗演讲稿
2014/05/12 职场文书
人事任命书怎么写
2014/06/05 职场文书
教师四风问题整改措施
2014/09/25 职场文书
医院领导班子查摆问题对照检查材料思想汇报
2014/10/08 职场文书
十佳少年事迹材料
2014/12/25 职场文书
小学教师自我评价
2015/03/04 职场文书
培养联系人考察意见
2015/06/01 职场文书
万能密码的SQL注入漏洞其PHP环境搭建及防御手段
2021/09/04 SQL Server
redis缓存存储Session原理机制
2021/11/20 Redis