JQuery表格插件datatables用法详解

来源：互联网发布：四川广电网络上网慢编辑：程序博客网时间：2024/06/10 04:29

这篇文章主要介绍了jQuery表格插件datatables用法，包括分页、排序等功能,是jQuery表格插件datatables比较基础的部分知识,需要的朋友可以参考下

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

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

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

?
1
2
3
$(document).ready(function() { 
$('#example').dataTable();
} ); 

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

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

3、数据排序

?
1
2
3
4
5
6
7
$(document).ready(function() { 
$('#example').dataTable( { 
"aaSorting": [ 
[ 4, "desc"] 
]
} ); 
} );

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

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

5、国际化

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(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、排序功能：

?
1
2
3
4
5
6
7
8
9
10
11
$(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//名称

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<tableid="gridtable"class="gridtable">//声明jquery datatables 
   <thead>
     <tr>
       <th>Name
       </th>
       <th>Value
       </th>
       <th>DisplayOrder
      </th>
    </tr>
  </thead>
  <tbody>
    .....//datatables内容，此处省略
  </tbody>
</table>
<inputtype="button"id="add"value="Add"/>//添加按钮 
<inputtype="button"id="edit"value="Edit"/>//编辑按钮 
<inputtype="button"id="delete"value="Delete"/>//删除按钮 
  
  
<divid="e_Attributes">//声明dialog,异步更新
  @using (Ajax.BeginForm("Update", "Product", new AjaxOptions 
{
  UpdateTargetId = "d_Attributes", 
  OnSuccess = "dialogClose", 
  HttpMethod = "Post", 
}))
  {
    <table>
      <tbody>
        <tr>             
          <td>Name</td>
          <td>
           <inputid="name"name="Name"type="text"style="width:250px"class="required"/>*</td>
        </tr>
        <tr>
          <td>Value</td>
          <td>
            <inputid="value"name="Value"type="text"style="width:250px"class="required"/>*</td>
        </tr>
        <tr>  
         <td>DisplayOrder</td>
          <td>
            <inputid="displayOrder"name="DisplayOrder"type="text"style="width:128px"class="required"/>*</td>
        </tr>
        <tr>
          <td>
            <inputid="submit"type="submit"name="submit"value="Submit"/> 
            <inputid="hiddenValue"type="hidden"name="hiddenValue"/> 
          </td>
        </tr>
      </tbody>
    </table>
  }
</div>

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<script type="text/javascript">
   functiondialogClose() { 
     $("#e_Attributes").dialog("close");
   }
   
   $("#e_Attributes").dialog({
     modal:true,
     autoOpen:false,
     show: { 
       effect:"blind",
      duration: 1000 
     },
     hide: { 
       effect:"explode",
       duration: 1000 
    },
    width: 400 
   });
   
   vareditor; 
   
   $(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');
        varaData = 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');
      }
  
      varaData = 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() { 
       varproductAttributeID = $("#productAttributeID").val();
      if(productAttributeID != ""&& productAttributeID != null) { 
        $("#hiddenValue").val("edit");
        $("#e_Attributes").dialog("open");
      }
  
    });
    //删除
    $("#delete").click(function() { 
      varproductAttributeID = $("#productAttributeID").val();
      varproductID = $("#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样式（此样式不管有无，均可去除，所以不用判断了）
    functionputNullValue() { 
      。。。。。。／／此处省略
    }
    //赋值
    functionputValue(aData) { 
     。。。。。。//此处省略
    }
  });
  
  $.ajaxSetup({ cache: false}); 
</script>

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

编辑功能效果图：

删除效果图：

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

引入CSS文件和JS文件

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<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 进行说明，如下所示，

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<tablecellpadding="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>
      <trclass="odd gradeX">
        <td>
          Trident
        </td>
        <td>
          Internet Explorer 4.0 
        </td>
        <td>
          Win 95+ 
        </td>
        <tdclass="center">
          4
        </td>
        <tdclass="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，显示信息。

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

?
1
2
3
4
5
6
/*
 * Example init
 */
$(document).ready(function(){
  $('#example').dataTable();
});

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

0 0