这篇文章主要介绍了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 < 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的代码：
? 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" > 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文件
? 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 < 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 : 每页的行数，每页默认数量:10sPaginationType: 分页样式，支持两种内置方式，two_button 和 full_numbers, 默认使用 two_button。bLengthChange : 是否允许用户通过一个下拉列表来选择分页后每页的行数。行数为 10，25，50，100。这个设置需要 bPaginate 支持。默认为 true。bFilter: 启用或禁止数据过滤，默认为 true。 注意，如果使用过滤功能，但是希望关闭默认的过滤输入框，应使用 sDombInfo: 允许或者禁止表信息的显示，默认为 true，显示信息。最为简单的使用方式，就是零配置的方式。
? 1 2 3 4 5 6 /* * Example init */ $(document).ready( function (){ $( '#example' ).dataTable(); });以上就是关于jQuery表格插件datatables用法的详细介绍，希望对大家的学习有所帮助。
