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 相关文章推荐
nicejforms——美化表单不用愁
Feb 20 Javascript
javascript 动态加载 css 方法总结
Jul 11 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
May 17 Javascript
动态添加删除表格行的js实现代码
Feb 28 Javascript
js+html5实现可在手机上玩的拼图游戏
Jul 17 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
Jun 24 Javascript
bootstrap fileinput完整实例分享
Nov 08 Javascript
学习使用bootstrap的modal和carousel
Dec 09 Javascript
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
json前后端数据交互相关代码
Sep 19 Javascript
vue项目强制清除页面缓存的例子
Nov 06 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
消息持续发送的完整例子
2006/10/09 PHP
PHP教程 变量定义
2009/10/23 PHP
php通过文件流方式复制文件的方法
2015/03/13 PHP
thinkPHP框架实现的简单计算器示例
2018/12/07 PHP
Prototype源码浅析 String部分(四)之补充
2012/01/16 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
JS数组(Array)处理函数整理
2014/12/07 Javascript
jQuery对象的selector属性用法实例
2014/12/27 Javascript
JavaScript函数使用的基本教程
2015/06/04 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
2015/12/02 Javascript
javascript正则表达式之分组概念与用法实例
2016/06/16 Javascript
JS实现touch 点击滑动轮播实例代码
2017/01/19 Javascript
js实现淘宝首页的banner栏效果
2019/11/26 Javascript
nodeJs的安装与npm全局环境变量的配置详解
2020/01/06 NodeJs
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
[09:40]DAC2018 4.5 SOLO赛 MidOne vs Miracle
2018/04/06 DOTA
Python学习笔记整理3之输入输出、python eval函数
2015/12/14 Python
django model去掉unique_together报错的解决方案
2016/10/18 Python
Python+Selenium自动化实现分页(pagination)处理
2017/03/31 Python
Python简单删除列表中相同元素的方法示例
2017/06/12 Python
Python多进程multiprocessing.Pool类详解
2018/04/27 Python
Python DataFrame设置/更改列表字段/元素类型的方法
2018/06/09 Python
Flask之请求钩子的实现
2018/12/23 Python
django框架用户权限中的session缓存到redis中的方法
2019/08/06 Python
numpy 声明空数组详解
2019/12/05 Python
纯css3实现鼠标经过图片显示描述的动画效果
2014/09/01 HTML / CSS
美国现代家具和家居商店:Apt2B
2016/08/29 全球购物
美国户外运动商店:Sun & Ski
2018/08/23 全球购物
Europcar澳大利亚官网:全球汽车租赁领域的领导者
2019/03/24 全球购物
50道外企软件测试面试题
2014/08/18 面试题
创建省级文明单位实施方案
2014/02/27 职场文书
晚会主持词开场白
2014/03/17 职场文书
中国梦演讲稿5分钟
2014/08/19 职场文书
学校运动会加油词
2015/07/18 职场文书
幼儿园班级管理心得体会
2016/01/07 职场文书
高中班主任工作总结(范文)
2019/08/20 职场文书