DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法（排序，过滤，分页等）_datatables资源-CSDN文库

1星 120 浏览量 2020-10-21 04:07:29 上传评论收藏 56KB PDF 举报

资源推荐

资源详情

资源评论

DataTables+BootStrap组合使用组合使用Ajax来获取数据并且动态加来获取数据并且动态加

载载dom的方法（排序，过滤，分页等）的方法（排序，过滤，分页等）

Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。这

篇文章主要介绍了DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法（排序，过滤，分

页等）,需要的朋友可以参考下

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"

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

内容反馈

lidonghua0326

2022-03-21

下了个问题？

weixin_38638799

粉丝: 5
资源: 952

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip