JQuery DataTables学习

1、Datatables简介

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

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

2、如何使用：

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

            1、DataTables的默认配置

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

                3、数据排序

                 4、隐藏某些列

                  5、国际化

6、排序功能：

7、数据获取支持4种：如下

3、参数讲解：

以下是在进行dataTable绑定处理时候可以附加的参数： 

4、实例讲解：

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的操作。

            添加功能效果图

             编辑功能效果图：

       删除效果图：

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": "上一页",           
给我老师的人工智能教程打call！http://blog.****.net/jiangjunshow