[插件]datatables,一款强大的基于jquery的表格插件

datatables是一款基于jquery的表格插件,它拥有强大的数据处理能力,是一款国际化的jquery插件!

datatables插件可以根据项目开发需要设置不同的参数属性选项(查看datatables的属性),详细的手册请访问官网(http://datatables.net/)参阅,久久经验网仅把在实际项目开发常用的方法供大家参考。

  1. $("#datatable").dataTable({//table的id 
  2.     "data":jsonData,//引入json数据对象 
  3.     "columns":[ 
  4.         {"data"'name',"sTitle":'姓名',"sClass":'fb center'},//sClass自定义样式 
  5.         {"data"'age',"sTitle":'年龄'}, 
  6.         {"data"'love',"sTitle":'爱好'}, 
  7.         {"data"'email',"sTitle":'Email'}, 
  8.         {"data"'tel',"sTitle":'电话'}, 
  9.         {"data"'qq',"sTitle":'QQ'}, 
  10.         //插入一个操作列 
  11.         { 
  12.             "sTitle":'操作'
  13.             "mDataProp""id"
  14.             "fnCreatedCell"function (nTd, sData, oData, iRow, iCol) {//参数:DOM, id, object对象, 当前所在行,当前所在列 
  15.                 $(nTd).addClass('center').html('<a href="javascript:void(0);" data-id="' + oData.id + '">编辑</a>&nbsp;&nbsp;'+
  16. '<a href="javascript:void(0);" data-id="' + oData.id + '">删除</a>');//oData.id,获取json对象里的id 
  17.             } 
  18.         },           
  19.     ], 
  20.     "bPaginate"true//翻页功能 
  21.     "bLengthChange"true//改变每页显示数据数量 
  22.     "bFilter"true//过滤功能 
  23.     "bSort"true//排序功能 
  24.     "bInfo"true,//页脚信息 
  25.     "bAutoWidth"true,//自动宽度 
  26.     //"iDisplayLength": 20,//默认显示的记录数 
  27.     //"aaSorting": [[ 4, "desc" ]],//设置第5个元素为默认排序   
  28.     "oLanguage": { 
  29.         //"sUrl":"language.txt",//读取语言包 
  30.         "sLengthMenu""每页显示 _MENU_ 条"
  31.         "sZeroRecords""没有找到符合条件的数据"
  32.         "sProcessing""正在获取数据,请稍后…"
  33.         "sInfo""当前第 _START_ - _END_ 条 共计 _TOTAL_ 条"
  34.         "sInfoEmpty""没有检索到数据"
  35.         "sInfoFiltered""(从 _MAX_ 条数据中检索)"
  36.         "sSearch""搜索:"
  37.         "oPaginate": { 
  38.             "sFirst""首页"
  39.             "sPrevious""前一页"
  40.             "sNext""后一页"
  41.             "sLast""尾页" 
  42.         } 
  43.     }, 
  44.     //"sPaginationType":"full_numbers",//分页样式 
  45.     "sDom":'<"top"fl<"clearfix">>rt<"bottom"ip<"clearfix">>'
  46.     //"bStateSave": true,//开启cookie(缺省false) 
  47.     "aoColumnDefs": [//参数作用:屏蔽由于json中不存在指定字段抛出的错误警告提示 
  48.         { 
  49.             "sDefaultContent"'',//当没有相关数据时 
  50.             "aTargets": [ '_all' ] 
  51.             //"sVisible":false//此列不显示 
  52.         } 
  53.     ] 
  54. }); 

当然,基于jquery的datatables插件其功能不止于这些,还有更多功能需要我们去挖掘!

datatables官网是国外的,国内目前也有人在翻译,中文版:http://dt.thxopen.com/index.html(有些demo还在完善中…)。

datatables感兴趣却不清楚datatables的使用方法?别急,欢迎加群讨论(239274519)或在线留言

 

 

 

相关经验

导读书签
书签初始化中…