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 相关文章推荐
jQuery函数的等价原生函数代码示例
May 27 Javascript
javascript作用域和闭包使用详解
Apr 25 Javascript
用原生JS获取CLASS对象(很简单实用)
Oct 15 Javascript
javascript结合ajax读取txt文件内容
Dec 05 Javascript
javascript学习总结之js使用技巧
Sep 02 Javascript
理解JS事件循环
Jan 07 Javascript
简单实现js选项卡切换效果
Feb 03 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
Mar 16 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
May 07 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
Feb 16 Javascript
如何用JS模拟实现数组的map方法
Jul 30 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
Mar 02 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单元测试框架PHPUnit用法详解
2019/01/23 PHP
javascript 广告后加载,加载完页面再加载广告
2010/11/25 Javascript
基于jquery的修改当前TAB显示标题的代码
2010/12/11 Javascript
js的一些常用方法小结
2011/06/29 Javascript
JS下拉框内容左右移动效果的具体实现
2013/07/10 Javascript
onmouseover和onmouseout的一些问题思考
2013/08/14 Javascript
JavaScript基础知识学习笔记
2014/12/02 Javascript
js实现分享到随页面滚动而滑动效果的方法
2015/04/10 Javascript
sso跨域写cookie的一段js脚本(推荐)
2016/05/25 Javascript
Highcharts学习之数据列
2016/08/03 Javascript
超全面的vue.js使用总结
2017/02/12 Javascript
Javascript实现运算符重载详解
2018/04/07 Javascript
vue自定义filters过滤器
2018/04/26 Javascript
js 计算图片内点个数的示例代码
2019/04/04 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
2019/05/08 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
2019/07/15 Javascript
Vue实现购物车实例代码两则
2020/05/30 Javascript
[00:53]TI3正赛第三天 DK怒破A队不败金身 现场国旗飘扬热血激昂
2013/08/10 DOTA
[01:45]亚洲邀请赛互动指南虚拟物品介绍
2015/01/30 DOTA
Python获取服务器信息的最简单实现方法
2015/03/05 Python
浅谈优化Django ORM中的性能问题
2020/07/09 Python
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
2019/04/16 HTML / CSS
全球航班旅行搜索网站:Cheapflights
2017/05/19 全球购物
Herve Leger官网:标志性绷带连衣裙等
2018/12/26 全球购物
zooplus意大利:在线宠物商店
2019/08/07 全球购物
英国折扣高尔夫商店:Discount Golf Store
2019/11/19 全球购物
预备党员思想汇报范文
2014/01/11 职场文书
会计学自荐信
2014/06/03 职场文书
体育教师求职信
2014/06/30 职场文书
公司门卫岗位职责范本
2014/07/08 职场文书
2015年话务员工作总结
2015/04/29 职场文书
少年的你:世界上没有如果,要在第一次就勇敢的反抗
2019/11/20 职场文书
JavaScript的function函数详细介绍
2021/11/20 Javascript
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python
《乙女游戏世界对路人角色很不友好》OP主题曲无字幕动画MV公开
2022/04/05 日漫