首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery表格插件datatables用法详解

Posted in Javascript onNovember 23, 2020

一、Datatables简介

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

  • 自动分页处理
  • 即时表格数据过滤
  • 数据排序以及数据类型自动检测
  • 自动处理列宽度
  • 可通过CSS定制样式
  • 支持隐藏列
  • 易用
  • 可扩展性和灵活性
  • 国际化
  • 动态创建表格
  • 免费的

二、如何使用

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

1、DataTables的默认配置

$(document).ready(function() { 
$('#example').dataTable(); 
} );

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

"bPaginate": true, //翻页功能 
"bLengthChange": true, //改变每页显示数据数量 
"bFilter": true, //过滤功能 
"bSort": false, //排序功能 
"bInfo": true,//页脚信息 
"bAutoWidth": true//自动宽度

3、数据排序

$(document).ready(function() { 
$('#example').dataTable( { 
"aaSorting": [ 
[ 4, "desc" ] 
] 
} ); 
} );

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

$(document).ready(function() { 
$('#example').dataTable( { 
"aoColumnDefs": [ 
{ "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] }, 
{ "bVisible": false, "aTargets": [ 3 ] } 
] } ); 
} );

5、国际化

$(document).ready(function() { 
$('#example').dataTable( { 
"oLanguage": { 
"sLengthMenu": "每页显示 _MENU_ 条记录", 
"sZeroRecords": "抱歉， 没有找到", 
"sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据", 
"sInfoEmpty": "没有数据", 
"sInfoFiltered": "(从 _MAX_ 条数据中检索)", 
"oPaginate": { 
"sFirst": "首页", 
"sPrevious": "前一页", 
"sNext": "后一页", 
"sLast": "尾页" 
}, 
"sZeroRecords": "没有检索到数据", 
"sProcessing": "<img src='./loading.gif' />" 
} 
} ); 
} );

6、排序功能：

$(document).ready(function() { 
$('#example').dataTable( { 
"aoColumns": [ 
null, 
{ "asSorting": [ "asc" ] }, 
{ "asSorting": [ "desc", "asc", "asc" ] }, 
{ "asSorting": [ ] }, 
{ "asSorting": [ ] } 
] 
} ); 
} );

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//名称

<table id="gridtable" class="gridtable">//声明jquery datatables 
 <thead> 
  <tr> 
  <th>Name 
  </th> 
  <th>Value 
  </th> 
  <th>DisplayOrder 
  </th> 
 </tr> 
 </thead> 
 <tbody> 
 .....//datatables内容，此处省略 
 </tbody> 
</table> 
<input type="button" id="add" value="Add" />//添加按钮 
<input type="button" id="edit" value="Edit" />//编辑按钮 
<input type="button" id="delete" value="Delete" />//删除按钮 
 
 
<div id="e_Attributes">//声明dialog,异步更新 
 @using (Ajax.BeginForm("Update", "Product", new AjaxOptions 
{ 
 UpdateTargetId = "d_Attributes", 
 OnSuccess = "dialogClose", 
 HttpMethod = "Post", 
})) 
 { 
 <table> 
  <tbody> 
  <tr>    
   <td>Name</td> 
   <td> 
   <input id="name" name="Name" type="text" style="width:250px" class="required"/>*</td> 
  </tr> 
  <tr> 
   <td>Value</td> 
   <td> 
   <input id="value" name="Value" type="text" style="width:250px" class="required"/>*</td> 
  </tr> 
  <tr> 
   <td>DisplayOrder</td> 
   <td> 
   <input id="displayOrder" name="DisplayOrder" type="text" style="width:128px" class="required"/>*</td> 
  </tr> 
  <tr> 
   <td> 
   <input id="submit" type="submit" name="submit" value="Submit" /> 
   <input id="hiddenValue" type="hidden" name="hiddenValue" /> 
   </td> 
  </tr> 
  </tbody> 
 </table> 
 } 
</div>

上面代码说明：这段代码主要分了两个部分，第一部分是jquery datatables的声明，<table id="gridtable" class="gridtable">；第二部分是dialog的声明，以及操作所需要的action，此部分的操作选择ajax无刷新页面技术。所需js的代码：

<script type="text/javascript"> 
 function dialogClose() { 
  $("#e_Attributes").dialog("close"); 
 } 
 
 $("#e_Attributes").dialog({ 
  modal: true, 
  autoOpen: false, 
  show: { 
  effect: "blind", 
  duration: 1000 
  }, 
  hide: { 
  effect: "explode", 
  duration: 1000 
 }, 
 width: 400 
 }); 
 
 var editor; 
 
 $(function () { 
 //声明datatable 
  $("#gridtable").dataTable().fnDestroy(); 
  editor = $('#gridtable').dataTable({ 
  "bInfo":false, 
  "bServerSide": false, 
  'bPaginate': false,   //是否分页。 
  "bProcessing": false,   //当datatable获取数据时候是否显示正在处理提示信息。 
  'bFilter': false,   //是否使用内置的过滤功能。 
  'bLengthChange': false,   //是否允许用户自定义每页显示条数。 
  'sPaginationType': 'full_numbers', //分页样式 
  }); 
 //单击，赋值，改样式 
 $("#gridtable tbody tr").click(function (e) { 
  if ($(this).hasClass('row_selected')) { 
  $(this).removeClass('row_selected'); 
  putNullValue() 
  } 
  else { 
  editor.$('tr.row_selected').removeClass('row_selected'); 
  $(this).addClass('row_selected'); 
  var aData = editor.fnGetData(this); 
  if (null != aData) { 
   putValue(aData); 
  } 
  } 
 }); 
 //双击 
 $("#gridtable tbody tr").dblclick(function () { 
  if ($(this).hasClass('row_selected')) { 
  //$(this).removeClass('row_selected'); 
  } 
  else { 
  editor.$('tr.row_selected').removeClass('row_selected'); 
  $(this).addClass('row_selected'); 
  } 
 
  var aData = editor.fnGetData(this); 
  if (null != aData) { 
  putValue(aData); 
  } 
 
  $("#hiddenValue").val("edit"); 
  $("#e_Attributes").dialog("open"); 
 
 }); 
 //添加 
 $("#add").click(function () { 
  editor.$('tr.row_selected').removeClass('row_selected'); 
  putNullValue(); 
 
  $("#hiddenValue").val("add"); 
  $("#e_Attributes").dialog("open"); 
 }); 
 //编辑 
 $("#edit").click(function () { 
  var productAttributeID = $("#productAttributeID").val(); 
  if (productAttributeID != "" && productAttributeID != null) { 
  $("#hiddenValue").val("edit"); 
  $("#e_Attributes").dialog("open"); 
  } 
 
 }); 
 //删除 
 $("#delete").click(function () { 
  var productAttributeID = $("#productAttributeID").val(); 
  var productID = $("#productID").val(); 
  if (productAttributeID != null && productAttributeID != "") { 
  if (confirm("Delete?")) { 
   $.ajax({ 
   type: "GET", 
   url: "@Url.Action("DeleteAttribute", "Product")", 
   data: { ProductID: productID, ProductAttributeID: productAttributeID },//参数名要和Action 中的参数名相同 
   dataType: "html", 
   cache: false, 
   success: function (result) { 
    $("#d_Attributes").html(result); 
    $("#productAttributeID").val(null); 
   } 
   }); 
  } 
  } 
 }); 
 
 //赋空值，并去除input-validation-error样式（此样式不管有无，均可去除，所以不用判断了） 
 function putNullValue() { 
  。。。。。。／／此处省略 
 } 
 //赋值 
 function putValue(aData) { 
  。。。。。。//此处省略 
 } 
 }); 
 
 $.ajaxSetup({ cache: false }); 
</script>

上面代码说明：这段代码分别为dialog 的声明，datatables的声明以add,edit,delete的操作。
添加功能效果图

jQuery表格插件datatables用法详解

编辑功能效果图：

jQuery表格插件datatables用法详解

删除效果图：

jQuery表格插件datatables用法详解

到此，功能已经全部实现，所需的代码也已经贴出。
4、分页实现

引入CSS文件和JS文件

<style type="text/css" title="currentStyle"> 
 @import "DataTables-1.8.1/media/css/demo_page.css"; 
 @import "DataTables-1.8.1/media/css/demo_table.css"; 
 @import "DataTables-1.8.1/media/css/demo_table_jui.css"; 
</style> 
<script type="text/javascript" language="javascript" src="DataTables-1.8.1/media/js/jquery.js"></script> 
<script type="text/javascript" language="javascript" src="DataTables-1.8.1/media/js/jquery.dataTables.js"></script> 
 
 -------------------------------------------------------------------------- 
 
-----------最简单的方式： 
 $(document).ready(function() { 
 $("#example").dataTable(); 
}); 
 
----------也可以自己定义各属性： 
<script type="text/javascript" language="javascript"> 
 $(document).ready(function() { 
  $("#example").dataTable({ 
//  "bPaginate": true, //开关，是否显示分页器 
//  "bInfo": true, //开关，是否显示表格的一些信息 
//  "bFilter": true, //开关，是否启用客户端过滤器 
//  "sDom": "<>lfrtip<>", 
//  "bAutoWith": false, 
//  "bDeferRender": false, 
//  "bJQueryUI": false, //开关，是否启用JQueryUI风格 
//  "bLengthChange": true, //开关，是否显示每页大小的下拉框 
//  "bProcessing": true, 
//  "bScrollInfinite": false, 
//  "sScrollY": "800px", //是否开启垂直滚动，以及指定滚动区域大小,可设值：'disabled','2000px' 
//  "bSort": true, //开关，是否启用各列具有按列排序的功能 
//  "bSortClasses": true, 
//  "bStateSave": false, //开关，是否打开客户端状态记录功能。这个数据是记录在cookies中的，打开了这个记录后，即使刷新一次页面，或重新打开浏览器，之前的状态都是保存下来的- ------当值为true时aoColumnDefs不能隐藏列 
//  "sScrollX": "50%", //是否开启水平滚动，以及指定滚动区域大小,可设值：'disabled','2000%' 
//  "aaSorting": [[0, "asc"]], 
//  "aoColumnDefs": [{ "bVisible": false, "aTargets": [0]}]//隐藏列 
//  "sDom": '<"H"if>t<"F"if>', 
  "bAutoWidth": false, //自适应宽度 
  "aaSorting": [[1, "asc"]], 
  "sPaginationType": "full_numbers", 
  "oLanguage": { 
   "sProcessing": "正在加载中......", 
   "sLengthMenu": "每页显示 _MENU_ 条记录", 
   "sZeroRecords": "对不起，查询不到相关数据！", 
   "sEmptyTable": "表中无数据存在！", 
   "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录", 
   "sInfoFiltered": "数据表中共为 _MAX_ 条记录", 
   "sSearch": "搜索", 
   "oPaginate": { 
   "sFirst": "首页", 
   "sPrevious": "上一页", 
   "sNext": "下一页", 
   "sLast": "末页" 
   } 
  } //多语言配置 
 
  }); 
 }); 
 </script>

对于 dataTables 来说，表格必须通过 thead 和 tbody 进行说明，如下所示

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"> 
 <thead> 
  <tr> 
  <th> 
   Rendering engine 
  </th> 
  <th> 
   Browser 
  </th> 
  <th> 
   Platform(s) 
  </th> 
  <th> 
   Engine version 
  </th> 
  <th> 
   CSS grade 
  </th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr class="odd gradeX"> 
  <td> 
   Trident 
  </td> 
  <td> 
   Internet Explorer 4.0 
  </td> 
  <td> 
   Win 95+ 
  </td> 
  <td class="center"> 
   4 
  </td> 
  <td class="center"> 
   X 
  </td> 
  </tr>

如果没有 thead 将会报错。

  • bPaginate: 是否分页，默认为 true，分页
  • iDisplayLength : 每页的行数，每页默认数量:10
  • sPaginationType: 分页样式，支持两种内置方式，two_button 和 full_numbers, 默认使用 two_button。
  • bLengthChange : 是否允许用户通过一个下拉列表来选择分页后每页的行数。行数为 10，25，50，100。这个设置需要 bPaginate 支持。默认为 true。
  • bFilter: 启用或禁止数据过滤，默认为 true。 注意，如果使用过滤功能，但是希望关闭默认的过滤输入框，应使用 sDom
  • bInfo: 允许或者禁止表信息的显示，默认为 true，显示信息。

最为简单的使用方式，就是零配置的方式。

/*
 * Example init
 */
$(document).ready(function(){
 $('#example').dataTable();
});

以上就是关于jQuery表格插件datatables用法的详细介绍，希望对大家的学习有所帮助。

jQuery表格插件datatables用法详解

- Author -

SimonMaxs

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js 代码集(学习js的朋友可以看下)
Jul 22 Javascript
各情景下元素宽高的获取实现代码
Sep 13 Javascript
修改file按钮的默认样式实现代码
Apr 23 Javascript
JavaScript实现的MD5算法完整实例
Feb 02 Javascript
即将发布的jQuery 3 有哪些新特性
Apr 14 Javascript
vue2.0实现导航菜单切换效果
May 08 Javascript
Javascript之高级数组API的使用实例
Mar 08 Javascript
Fetch超时设置与终止请求详解
May 18 Javascript
Vue实现表格批量审核功能实例代码
May 28 Javascript
小程序使用分包的示例代码
Mar 23 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
Mar 02 Javascript
JavaScript中跨域问题的深入理解
Mar 04 Javascript
详解JavaScript UTC时间转换方法
Jan 07 #Javascript
jQuery formValidator表单验证
Jan 07 #Javascript
JavaScript中的原始值和复杂值
Jan 07 #Javascript
理解JS事件循环
Jan 07 #Javascript
angularjs创建弹出框实现拖动效果
Aug 25 #Javascript
JavaScript中定义类的方式详解
Jan 07 #Javascript
javascript类型系统 Window对象学习笔记
Jan 07 #Javascript
日志格式分析(1) create(1) nginx(76) 子查询(1) TableField(1) Windows server 2012(17) el-table(1) 组策略(1) mounted(1) Mybatis-Plus(3)
You might like
如何限制访问者的ip(PHPBB的代码)
2006/10/09 PHP
PHP 中的面向对象编程：通向大型 PHP 工程的办法
2006/12/03 PHP
记录mysql性能查询过程的使用方法
2013/05/02 PHP
Laravel 4 初级教程之Pages、表单验证
2014/10/30 PHP
PHP获取指定月份第一天和最后一天的方法
2015/07/18 PHP
一个简单至极的PHP缓存类代码
2015/10/23 PHP
php封装的smarty类完整实例
2016/10/19 PHP
javascript之函数直接量(function(){})()
2007/06/29 Javascript
javascript下阻止表单重复提交、防刷新、防后退
2007/08/17 Javascript
js兼容火狐显示上传图片预览效果的方法
2015/05/21 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
2016/05/05 Javascript
bootstrap模态框实现拖拽效果
2016/12/14 Javascript
VUE元素的隐藏和显示（v-show指令)
2017/06/23 Javascript
jquery+css实现下拉列表功能
2017/09/03 jQuery
vue中eventbus被多次触发以及踩过的坑
2017/12/02 Javascript
vue2.0的虚拟DOM渲染思路分析
2018/08/09 Javascript
Vuex 使用及简单实例(计数器)
2018/08/29 Javascript
Windows下Node爬虫神器Puppeteer安装记
2019/01/09 Javascript
解决Vue打包上线之后部分CSS不生效的问题
2019/11/12 Javascript
electron踩坑之dialog中的callback解决
2020/10/06 Javascript
python 自动去除空行的实例
2018/07/24 Python
python中map的基本用法示例
2018/09/10 Python
python进行TCP端口扫描的实现
2018/12/21 Python
用python求一重积分和二重积分的例子
2019/12/06 Python
Python实现企业微信机器人每天定时发消息实例
2020/02/25 Python
Get The Label中文官网：英国运动时尚购物平台
2017/04/19 全球购物
美国在线购买空气净化器、除湿器、加湿器网站：AllergyBuyersClub
2021/03/16 全球购物
解释一下钝化(Swap out)
2016/12/26 面试题
中秋节礼品促销方案
2014/02/02 职场文书
2016年学习雷锋精神广播稿
2015/12/17 职场文书
三严三实·严以修身心得体会
2016/01/15 职场文书
OpenCV 图像梯度的实现方法
2021/07/25 Python
python开发的自动化运维工具ansible详解
2021/08/07 Python
图文详解Nginx版本平滑升级方案
2021/09/15 Servers
mysql中整数数据类型tinyint详解
2021/12/06 MySQL
python数据分析之单因素分析线性拟合及地理编码
2022/06/25 Python