jQuery表格插件datatables用法详解_jquery

来源：懂视网责编：小采时间：2020-11-27 21:48:28

jQuery表格插件datatables用法详解_jquery

jQuery表格插件datatables用法详解_jquery:一、Datatables简介 DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。主要特点：自动分页处理即时表格数据过滤数据排序以及数据类型自动检测自动处理列宽度可通过CSS

推荐度：

点击下载本文 文档为doc格式

导读jQuery表格插件datatables用法详解_jquery:一、Datatables简介 DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。主要特点：自动分页处理即时表格数据过滤数据排序以及数据类型自动检测自动处理列宽度可通过CSS

一、Datatables简介
DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。主要特点：

自动分页处理

即时表格数据过滤

数据排序以及数据类型自动检测

自动处理列宽度

可通过CSS定制样式

支持隐藏列

易用

可扩展性和灵活性

国际化

动态创建表格

免费的

二、如何使用
在做后台的时候并没有美工和前端工程师来配合你做页面，为了显示数据并有一定的美感，我们可以使用jQuery的DataTables插件来帮助我们完成任务
1、DataTables的默认配置

2、DataTables的一些基础属性配置

3、数据排序

从第0列开始，以第4列倒序排列
4、隐藏某些列

5、国际化

6、排序功能：

7、数据获取支持4种：如下

•DOM 文档数据

•Javascript array js数组

•Ajax source Ajax请求数据

•Server side processing 服务器端数据

三、实例讲解

1、需求：如下图所示，对datatables的内容进行添加，编辑，删除的操作。

2、分析：添加功能---单击add按钮，弹出对话框，添加新的内容。
编辑功能---单击datatables可以选中一行，此行改变颜色，即是已经选中，单击edit按钮，弹出dialog，此dialog中的内容是我们选中行的内容。如果没有选中行，点击edit按钮，则不会弹出dialog。当双击datatables中的某一行时，也弹出dialog，并且双击的行改变颜色，dialog中的内容是我们双击行的内容。
删除功能---单击datatables选中一行，单击delete按钮，弹出警告框，提示要不要删除所选内容。当没有选中任何内容时，单击delete按钮，不会弹出警告框，也不会删除内容。
3、编码：
Attributes//名称

 //声明jquery datatables 
  
 .....//datatables内容，此处省略 
  
  
 Name 
  
 Value 
  
 DisplayOrder 
  
  
  
  
 
//添加按钮 
//编辑按钮 
//删除按钮 
 
 
//声明dialog,异步更新 
 @using (Ajax.BeginForm("Update", "Product", new AjaxOptions 
{ 
 UpdateTargetId = "d_Attributes", 
 OnSuccess = "dialogClose", 
 HttpMethod = "Post", 
})) 
 { 
  
  
  
 Name 
  
 * 
  
  
 Value 
  
 * 
  
  
 DisplayOrder 
  
 * 
  
  
  
  
  
  
  
  
  
 }