JQuery.dataTables的数据表格插件示例

最新推荐文章于 2024-07-31 15:52:50 发布

玉临风

最新推荐文章于 2024-07-31 15:52:50 发布

阅读量3.3k

点赞数

分类专栏： Javascript 文章标签： jquery dataTable

本文链接：https://blog.csdn.net/u014748374/article/details/80729165

版权

本文介绍了如何利用JQuery.dataTables插件为HTML表格添加高级交互特性，如分页、搜索和排序。该插件支持多种数据源和主题，并提供丰富的扩展选项。在Bootstrap环境下，展示了设置和使用的基本步骤，包括引用相关CSS和JS文件，以及前端和后端的配置示例。

摘要由CSDN通过智能技术生成

基于Bootstrap样式：

https://datatables.net/examples/styling/bootstrap.html

中文社区：

http://datatables.club/

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

分页，即时搜索和排序
几乎支持任何数据源：DOM， javascript， Ajax 和服务器处理
支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
各式各样的扩展: Editor, TableTools, FixedColumns ……
丰富多样的option和强大的API
支持国际化
超过2900+个单元测试
免费开源（ MIT license ）！商业支持
更多特性请到官网查看

引用说明：前提是已经引用了JQuery插件

仅使用原生表格，

    [html]  
   view plaincopy
<link href="~/Scripts/table/js/jquery.dataTables.min.css" rel="stylesheet" />  
<script src="~/Scripts/table/js/jquery.dataTables.min.js"></script>  

更多是使用Bootstrap的样式：

    [html]  
   view plaincopy
@*注意，css样式需要更改，不能同时引用*@  
@*<link href="~/Scripts/table/js/jquery.dataTables.min.css" rel="stylesheet" />*@  
<script src="~/Scripts/table/js/jquery.dataTables.min.js"></script>  
<link href="~/Scripts/table/js/dataTables.bootstrap4.css" rel="stylesheet" />  
<