文档章节

DataTables+BootStrap组合Ajax数据使用方法(排序,过滤,分页等)

Simon_ITer
 Simon_ITer
发布于 2016/11/08 11:37
字数 461
阅读 2610
收藏 67

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的源文件:

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"
        ]
   ]
}

 

© 著作权归作者所有

Simon_ITer
粉丝 73
博文 41
码字总数 27876
作品 0
上海
前端工程师
私信 提问
加载中

评论(5)

zeddy
zeddy

引用来自“李锡”的评论

json格式都是错的!

说了是二维数组的嘛。。
Simon_ITer
Simon_ITer 博主

引用来自“Simon_ITer”的评论

引用来自“李锡”的评论

json格式都是错的!

你确定么。。

引用来自“李锡”的评论

{
"data": [
{
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011/04/25",
"$320,800"
},
{
"Garrett Winters",
"Accountant",
"Tokyo",
"8422",
"2011/07/25",
"$170,750"
}
]
}
标准的格式应该这样子写吧!
我。。。兄弟,你该补习一波了😂
李锡
李锡

引用来自“Simon_ITer”的评论

引用来自“李锡”的评论

json格式都是错的!

你确定么。。
{
"data": [
{
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011/04/25",
"$320,800"
},
{
"Garrett Winters",
"Accountant",
"Tokyo",
"8422",
"2011/07/25",
"$170,750"
}
]
}
标准的格式应该这样子写吧!
Simon_ITer
Simon_ITer 博主

引用来自“李锡”的评论

json格式都是错的!

你确定么。。
李锡
李锡
json格式都是错的!
jQuery Datatable 实用简单实例

目标: 使用jQuery Datatable构造数据列表,并且增加或者隐藏相应的列,已达到数据显示要求。同时,jQuery Datatable强大的功能支持:排序,分页,搜索等。 Query Datatable能良好支持数据完...

sgyyz
2014/05/08
0
0
10 款很有创意的 jQuery 表格插件

本文包含 10 款 jQuery 的表格插件,包含表格功能增强、导出、排序以及过滤等功能。 1. Animated table-sort 该插件可让你使用动画的方式对数据进行排序,在线演示: here. 2. BIGrid 该插件...

红薯
2011/08/09
4.6K
4
13 个最佳 JavaScript 数据表格库

JavaScript 是一种通常被用在网页开发中的编程语言。它主要是在互联网上的网页浏览器中开发出效果出众且可交互的特效。它是客户端脚本语言中的一种,是被用来作为通过用户的网页浏览器进行处...

oschina
2017/03/10
7K
7
Sigma Grid数据表格

Sigma Grid 是一个基于 Ajax 的数据表格,用以显示滚动的表格以及进行单元格数据的在线编辑,支持各种流行的浏览器,提供服务器端的集成解决方案,包括 PHP、Java、.NET 和 Perl。主要功能包...

wanganf
2012/02/29
356
0
Sigma Grid表格的功能特性

Sigma Grid 是一个基于 Ajax 的数据表格,用以显示滚动的表格以及进行单元格数据的在线编辑,支持各种流行的浏览器,提供服务器端的集成解决方案,包括 PHP、Java、.NET 和 Perl。主要功能包...

zkjava
2012/02/28
311
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
今天
1K
12
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
36
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
38
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
53
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
19
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部