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 相关文章推荐
javascript 数组排序函数
Aug 20 Javascript
js中substring和substr的详细介绍与用法
Aug 29 Javascript
JavaScript动态创建div等元素实例讲解
Jan 06 Javascript
js实现div在页面拖动效果
May 04 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
Aug 09 Javascript
AngularJs Forms详解及简单示例
Sep 01 Javascript
纯原生js实现table表格的增删
Jan 05 Javascript
Angular之指令Directive用法详解
Mar 01 Javascript
jQuery实现遍历复选框的方法示例
Mar 06 Javascript
React中使用UMEditor的方法示例
Dec 27 Javascript
ES6中Set和Map用法实例详解
Mar 02 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
Feb 10 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
ThinkPHP分页类使用详解
2014/03/05 PHP
php结合ajax实现赞、顶、踩功能实例
2014/05/12 PHP
PHP实现对站点内容外部链接的过滤方法
2014/09/10 PHP
PHP中Session和Cookie是如何操作的
2015/10/10 PHP
PHP实现获取url地址中顶级域名的方法示例
2019/06/05 PHP
javascript英文日期(有时间)选择器
2007/05/02 Javascript
js自动下载文件到本地的实现代码
2013/04/28 Javascript
javascript获取checkbox复选框获取选中的选项
2014/08/12 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
2014/10/17 Javascript
js实现简单秒表走动的时钟特效
2020/03/25 Javascript
js实现类似MSN提示的页面效果代码分享
2015/08/24 Javascript
js实现的黑背景灰色二级导航菜单效果代码
2015/08/24 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
JS实现兼容性较好的随屏滚动效果
2015/11/09 Javascript
vuejs指令详解
2017/02/07 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
2017/03/15 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
如何从零开始手写Koa2框架
2019/03/22 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
2019/11/09 Javascript
Python多层嵌套list的递归处理方法(推荐)
2016/06/08 Python
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
对Tensorflow中的变量初始化函数详解
2018/07/27 Python
python爬取cnvd漏洞库信息的实例
2019/02/14 Python
python多线程使用方法实例详解
2019/12/30 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
python3+openCV 获取图片中文本区域的最小外接矩形实例
2020/06/02 Python
Giuseppe Zanotti美国官方网站:将鞋履视为高级时装般精心制作
2018/02/06 全球购物
加拿大探亲邀请信
2014/01/28 职场文书
党员自我评议对照检查材料
2014/09/27 职场文书
小班下学期幼儿评语
2014/12/30 职场文书
面试通知单大全
2015/04/20 职场文书
环保建议书作文300字
2015/09/14 职场文书
自愿离婚协议书范本2016
2016/03/18 职场文书
研究生学习计划书应该怎么写?
2019/09/10 职场文书
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python