jQuery表格插件datatables用法详解_jquery

一、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种：如下

  • •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//名称

 <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": "上一页",
            "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 将会报错。

  • 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
表格插件
jquery的用法详解、jqueryzoom插件用法、jquery插件用法、jqueryjsonp插件 用法、jquery插件详解，以便于您获取更多的相关知识。

时间： 2024-08-03 21:34:52

jQuery表格插件datatables用法详解_jquery的相关文章

jQuery旋转插件jqueryrotate用法详解_jquery

本文实例讲述了jQuery旋转插件jqueryrotate用法.分享给大家供大家参考,具体如下: CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(filter),但不全面,而且效果和性能都不好. 今天介绍一款 jQuery 插件--jqueryrotate,它可以实现旋转效果.jqueryrotate 支持所有主流浏览器,包括 IE6.如果你想在低版本

jQuery日历插件datepicker用法详解_jquery

 jQuery是一款不可多得的非常优秀的javascript脚本开发库,而基于其上的很多插件也是非常规范和卓越的,如果错过这番美景真是太可惜了,比如datepicker这个插件. 一般MIS系统的前端,尤其是用户注册页面,都会有诸如"出身年月"的日期输入框,最简单的做法就是使用一个<input type="text"/>标签,这样做的弊端有很多:首先是与数据库字段类型的匹配.其次是输入日期的合法性如"13月"或者闰年等等问题,如果深入

jQuery表格插件datatables用法汇总_jquery

DataTables是一个jQuery的表格插件,本文为大家分享了表格插件datatables用法,介绍了基础的部分知识,具体内容如下 一.初始化 在页面中 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.css&

基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解_javascript技巧

Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadify 好看一些,功能也强大些,本文主要基于我自己的框架代码案例,介绍其中文件上传插件File Input的使用. 1.文件上传插件File Input介绍 这个插件主页地址是:http://plugins.krajee.com/file-input,可以从这里看到很多Demo的代码展示:http:/

JS、jQuery中select的用法详解_javascript技巧

1.js var obj=document.getElementById(selectid); obj.options.length = 0; //清除所有内容 obj.options[index] = new Option("three",3); //更改对应的值 obj.options[index].selected = true; //保持选中状态 obj.add(new Option("4","4")); "文本",&

jQuery validate插件功能与用法详解_jquery

本文实例讲述了jQuery validate插件功能与用法.分享给大家供大家参考,具体如下: 前言:对于表单内容格式的验证,原生JS的写法,较为繁琐,笔者曾在写一个注册界面的时候,验证邮箱格式,用户名格式,密码格式,多处使用了正则,并且错误提示信息也要用display:none/显示隐藏,在用过jQuery validate插件后,则大大加快了开发速度! 1.jQuery validate插件提供了强大的验证功能,jQuery validate插件的官网是http://jqueryvalidat

jQuery事件绑定用法详解_jquery

本文实例讲述了jQuery事件绑定.分享给大家供大家参考,具体如下: style.css *{margin:0;padding:0;} body { font-size: 13px; line-height: 130%; padding: 60px } #panel { width: 300px; border: 1px solid #0050D0 } .head { padding: 5px; background: #96E555; cursor: pointer } .content {

jQuery.Callbacks()回调函数队列用法详解_jquery

本文实例讲述了jQuery.Callbacks()回调函数队列用法.分享给大家供大家参考,具体如下: 1.jQuery.Callbacks The jQuery.Callbacks() function, introduced in version 1.7, returns a multi-purpose object that provides a powerful way to manage callback lists. It supports adding, removing, firi

谈谈jQuery Ajax用法详解_jquery

定义和用法 ajax() 方法通过 HTTP 请求加载远程数据. 该方法是 jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象.大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性. 最简单的情况下,$.ajax() 可以不带任何参数直接使用. 注意:所有的选项都可以通过 $.ajaxSetup() 函数来全局设置. jQuery Ajax在web应用开发中很常用