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 相关文章推荐
JS动态添加与删除select中的Option对象(示例代码)
Dec 25 Javascript
javascript中的括号()用法小结
Apr 14 Javascript
javascript中cookie对象用法实例分析
Jan 30 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
Sep 04 Javascript
不同js异步函数同步的实现方法
May 28 Javascript
yarn与npm的命令行小结
Oct 20 Javascript
Javascript 函数的四种调用模式
Nov 05 Javascript
JS+Ajax实现百度智能搜索框
Aug 04 Javascript
详谈js对url进行编码和解码(三种方式的区别)
Aug 16 Javascript
浅析node应用的timing-attack安全漏洞
Feb 28 Javascript
VUE 全局变量的几种实现方式
Aug 22 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
Apr 29 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
source.php查看源文件
2006/12/09 PHP
php数组相加 array(“a”)+array(“b”)结果还是array(“a”)
2012/09/19 PHP
php结合ACCESS的跨库查询功能
2015/06/12 PHP
PHP 7.4中使用预加载的方法详解
2019/07/08 PHP
基于JQuery的一句代码实现表格的简单筛选
2010/07/26 Javascript
一些常用且实用的原生JavaScript函数
2010/09/08 Javascript
jQuery Tools Dateinput使用介绍
2012/07/14 Javascript
Jquery多选框互相内容交换的实例代码
2013/07/04 Javascript
使用jquery解析XML的方法
2014/09/05 Javascript
jQuery分组选择器用法实例
2014/12/23 Javascript
javaScript中push函数用法实例分析
2015/06/08 Javascript
在JavaScript中使用开平方根的sqrt()方法
2015/06/15 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
js图片轮播手动切换效果
2015/11/10 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
详解webpack提取第三方库的正确姿势
2017/12/22 Javascript
Node.Js中实现端口重用原理详解
2018/05/03 Javascript
解决vue props 拿不到值的问题
2018/09/11 Javascript
通过说明与示例了解js五种设计模式
2019/06/17 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
2020/09/04 Javascript
搭建Python的Django框架环境并建立和运行第一个App的教程
2016/07/02 Python
提升python处理速度原理及方法实例
2019/12/25 Python
pandas-resample按时间聚合实例
2019/12/27 Python
什么是Python中的顺序表
2020/06/02 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
python+selenium实现12306模拟登录的步骤
2021/01/21 Python
固特异美国在线轮胎店:Goodyear Tire
2019/02/23 全球购物
无工作经验者个人求职信范文
2013/12/22 职场文书
学生社团文化节开幕式主持词
2014/03/28 职场文书
公司优秀员工获奖感言
2014/08/14 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
个人委托书怎么写
2014/09/17 职场文书
村主任“四风”问题个人整改措施
2014/10/04 职场文书
给校长的建议书作文400字
2015/09/14 职场文书
CSS3实现模糊背景的三种效果示例
2021/03/30 HTML / CSS