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

    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="/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用法的详细介绍,希望对大家的学习有所帮助。

标签:
jQuery,表格插件,datatables

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“jQuery表格插件datatables用法详解”

暂无“jQuery表格插件datatables用法详解”评论...

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。