jQuery表格插件datatables用法详解

前端之家收集整理的这篇文章主要介绍了jQuery表格插件datatables用法详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、Datatables简介

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

  • 自动分页处理
  • 自动检测
  • 自动处理列宽度
  • 支持隐藏列

二、如何使用

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

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

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

3、数据排序

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

5、国际化

显示 _MENU_ 条记录","sZeroRecords": "抱歉, 没有找到","sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据","sInfoEmpty": "没有数据","sInfoFiltered": "(从 _MAX_ 条数据中检索)","oPaginate": { "sFirst": "首页","sPrevIoUs": "前一页","sNext": "后一页","sLast": "尾页" },"sZeroRecords": "没有检索到数据","sProcessing": "" } } ); } );

6、排序功能

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

三、实例讲解

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

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

Name Value DisplayOrder .....//datatables内容,此处省略 //添加按钮 //编辑按钮 //删除按钮

<div id="e_Attributes">//声明dialog,异步更新
@using (Ajax.BeginForm("Update","Product",new AjaxOptions
{
UpdateTargetId = "d_Attributes",OnSuccess = "dialogClose",HttpMethod = "Post",}))
{
<table>

required"/>*required"/>*required"/>*

上面代码说明:这段代码主要分了两个部分,第一部分是jquery datatables的声明,

页面技术。所需js的代码

$("#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"); 

}); 
//<a href="/tag/tianjia/" target="_blank" class="keywords">添加</a> 
$("#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"); 
  } 

}); 
//<a href="/tag/shanchu/" target="_blank" class="keywords">删除</a> 
$("#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); 
        } 
      }); 
    } 
  } 
}); 

//赋空值,并<a href="/tag/quchu/" target="_blank" class="keywords">去除</a>input-validation-error样式(此样式不管有无,均可<a href="/tag/quchu/" target="_blank" class="keywords">去除</a>,所以不用判断了) 
function putNullValue() { 
  。。。。。。//此处省略 
} 
//赋值 
function putValue(aData) { 
 。。。。。。//此处省略 
} 

});

$.ajaxSetup({ cache: false });

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

编辑功能效果图:

删除效果图:

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

引入CSS文件和JS文件


-----------最简单的方式:
$(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%",//是否开启水平滚动,以及指定滚动区域大小,'2000%'
// "aaSorting": [[0,"asc"]],// "aoColumnDefs": [{ "bVisible": false,"aTargets": [0]}]//隐藏列
// "sDom": '<"H"if>t<"F"if>',"bAutoWidth": false,//自适应宽度
"aaSorting": [[1,"sPaginationType": "full_numbers","oLanguage": {
"sProcessing": "正在加载中......","sLengthMenu": "每页显示 MENU 条记录","sZeroRecords": "对不起,查询不到相关数据!","sEmptyTable": "表中无数据存在!","sInfo": "当前显示 STARTEND 条,共 TOTAL 条记录","sInfoFiltered": "数据表中共为 MAX 条记录","sSearch": "搜索","oPaginate": {
"sFirst": "首页","sPrevIoUs": "上一页","sNext": "下一页","sLast": "末页"
}
} //多语言配置

  }); 
}); 

对于 dataTables 来说,表格必须通过 thead 和 tbody 进行说明,如下所示,

Rendering engine

如果没有 thead 将会报错。

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

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

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

猜你在找的jQuery相关文章

Browser Platform(s) Engine version CSS grade