jQuery datatables 表格插件介绍

标签: jquerytable插件   时间:2016-05-07
这篇文章主要介绍了jQuery表格插件datatables用法,包括分页、排序等功能,是jQuery表格插件datatables比较基础的部分知识,需要的朋友可以参考下。

一、Datatables简介

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

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

 

二、如何使用

在做后台的时候并没有美工和前端工程师来配合你做页面,为了显示数据并有一定的美感,我们可以使用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种:如下

  1. DOM   文档数据  
  2. Javascript array  js数组  
  3. Ajax source     Ajax请求数据  
  4. Server side processing  服务器端数据 

 

三、实例讲解

1、需求:如下图所示,对datatables的内容进行添加,编辑,删除的操作。

2、分析:

  1. 添加功能---单击add按钮,弹出对话框,添加新的内容。
  2. 编辑功能---单击datatables可以选中一行,此行改变颜色,即是已经选中,单击edit按钮,弹出dialog,此dialog中的内容是我们选中行的内容。如果没有选中行,点击edit按钮,则不会弹出dialog。当双击datatables中的某一行时,也弹出dialog,并且双击的行改变颜色,dialog中的内容是我们双击行的内容。
  3. 删除功能---单击datatables选中一行,单击delete按钮,弹出警告框,提示要不要删除所选内容。当没有选中任何内容时,单击delete按钮,不会弹出警告框,也不会删除内容。

3、 编码:

<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="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 进行说明,如下所示,

<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 将会报错。

  1. bPaginate: 是否分页,默认为 true,分页
  2. iDisplayLength : 每页的行数,每页默认数量:10
  3. sPaginationType: 分页样式,支持两种内置方式,two_button 和 full_numbers, 默认使用 two_button。
  4. bLengthChange : 是否允许用户通过一个下拉列表来选择分页后每页的行数。行数为 10,25,50,100。这个设置需要 bPaginate 支持。默认为 true。
  5. bFilter: 启用或禁止数据过滤,默认为 true。 注意,如果使用过滤功能,但是希望关闭默认的过滤输入框,应使用 sDom
  6. bInfo: 允许或者禁止表信息的显示,默认为 true,显示信息。

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

/*
 * Example init
 */
$(document).ready(function(){
  $('#example').dataTable();
});

以上就是关于jQuery表格插件datatables用法的详细介绍

原文地址:http://www.manongjc.com/article/333.html