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条件判断使用小技巧总结
Sep 08 Javascript
Script的加载方法小结
Jan 12 Javascript
JavaScript实现的多个图片广告交替显示效果代码
Sep 04 Javascript
JavaScript实现自动切换图片代码
Oct 11 Javascript
JavaScript基础——使用Canvas绘图
Nov 02 Javascript
angularJS模态框$modal实例代码
May 27 Javascript
JavaScript闭包_动力节点Java学院整理
Jun 27 Javascript
使用 node.js 模仿 Apache 小部分功能
Jul 07 Javascript
js canvas实现5张图片合成一张图片
Jul 15 Javascript
JS实现可视化音频效果的实例代码
Jan 16 Javascript
js代码实现轮播图
May 04 Javascript
Typescript类型系统FLOW静态检查基本规范
May 25 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/11/22 PHP
PHP的PDO连接讲解
2019/01/24 PHP
js正确获取元素样式详解
2009/08/07 Javascript
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
JQuery中html()方法使用不当带来的陷阱
2011/04/07 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
2011/08/28 Javascript
js 针对html DOM元素操作等经验累积
2014/03/11 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
2015/02/26 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
高性能JavaScript 重排与重绘(2)
2015/08/11 Javascript
如何处理JSON中的特殊字符
2016/11/30 Javascript
基于javascript实现最简单选项卡切换
2017/02/01 Javascript
JavaScript提高加载和执行效率的方法
2017/02/03 Javascript
详解Nodejs内存治理
2018/05/13 NodeJs
JavaScript创建防篡改对象的方法分析
2018/12/30 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
2019/11/12 Javascript
vue+ts下对axios的封装实现
2020/02/18 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
详解Vue中的watch和computed
2020/11/09 Javascript
[13:18]《一刀刀一天》之DOTA全时刻21:详解TI新赛制 A队再露獠牙
2014/06/24 DOTA
Python中编写ORM框架的入门指引
2015/04/29 Python
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
Linux下Pycharm、Anaconda环境配置及使用踩坑
2018/12/19 Python
Python3之字节串bytes与字节数组bytearray的使用详解
2019/08/27 Python
Python3爬虫中Selenium的用法详解
2020/07/10 Python
css3如何绘制一个圆圆的loading转圈动画
2018/01/09 HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
2020/08/18 HTML / CSS
Omio美国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
Looking4Parking美国:全球排名第一的机场停车比较品牌
2019/08/26 全球购物
亿阳信通股份有限公司C#笔试题
2016/12/06 面试题
编辑硕士自荐信范文
2013/11/27 职场文书
圣诞节活动策划方案
2014/06/09 职场文书
违反纪律检讨书范文
2015/05/07 职场文书
高中班主任培训心得体会
2016/01/07 职场文书
SQL Server2019数据库备份与还原脚本,数据库可批量备份
2021/11/20 SQL Server
Windows Server 2019 安装DHCP服务及相关配置
2022/04/28 Servers