jQuery表格插件datatables用法详解

一、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种：如下

• "color: #333333">"color: #333333">"color: #333333">"htmlcode">

   <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的操作。
  添加功能效果图

  

  编辑功能效果图：

  

  删除效果图：

  

  到此，功能已经全部实现，所需的代码也已经贴出。
  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="/UploadFiles/2021-04-02/jquery.js">
  
  对于 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用法的详细介绍，希望对大家的学习有所帮助。