自己实现的数据表格控件（dataTable），支持自定义样式和标题数据、ajax等各种自定义设置以及分页自定义

时间：2021-12-21 18:07:08

一、前言

也没什么好说的嘛，用了蛮多github上开源的能够实现dataTable功能的表格插件，不过都默认绑定样式啊，数据格式也设定的比较死，所以忍不住自己实现了一个简单的可自定义样式和自定义数据返回格式的数据表格插件，原生js是保留的，后面如果更新新版本的话会去除对jQuery依赖。实话实说，分页确实没做好，自定义样式后面抽空会继续完善。

二、实现功能

一个较高自定义式的数据表格插件，无默认样式文件

三、使用实例

可以自行定义每个标题的样式，可以style，也可以指定class；

分页那里必须指定调用的API

  1. //所有配置的顺序可以随便排序，不一样要按照我这个顺序，
  2. var table =new Tables({'id':'#dataTables',//必须，绑定的table，可以是Dom对象（因为底层直接用的$(id)，所以像jquery一样用就ok，简单方便）
  3. 'pageSize':15,//每页显示行数
  4. 'titles':{"序号":{'style':'width:10%','className':''},"类别":{'style':'width:10%','className':''},"编码":{'style':'width:10%','className':''},"名称":{'style':'width:30%','className':''},"备注":{'style':'width:20%','className':''},"操作":{'style':'width:20%','className':''}},//必须，表格的标题，其实后面的值是可以为空的，后面考虑到要增加复杂结构的标题头生成，所以预留
  5. 'fields':{
  6. "1":{"render":function(data,index,f){return index;}},
  7. "dictionarykind":"",//支持render修改列的展示值
  8. "dictionarycode":"",
  9. "dictionaryvalue":"",
  10. "remark":{"render":function(data,index,f){if(isNull(f)){return "";}return f}},
  11. "":{'render':function(data,index,f){return "<a href=javascript:javascript:update(\'" +data.dictionaryid +"\',\'"+index+"\')> 修改 </a> <a href=javascript:javascript:remove(\'" +data.dictionaryid +"\',\'"+index+"\')> 删除 </a>"}},//可以出现空字段，不会绑定到表格数据（一般情况下是为了加入控制按钮啥的）
  12. "dictionaryid":"",
  13. },//必须，字段映射，与返回数据相同既可以把字段映射到每列，这个就不需要讲了，主要是后面的render可以修改返回参数，另外超出标题数量的字段是会自动隐藏的
  14. 'ajaxParam':{
  15. type:"POST",
  16. dataType:"json",
  17. async:false,
  18. url:"cc/eguid/queryList",
  19. data:function(d){var id=$("#camera_org").val();d.dictionarykind=id;/*这里可以重设参数,内置参数只有pageIndex和pageSize两个*/return d;},
  20. },//必须，ajax请求，跟jquery的ajax参数一样，好吧，作者偷懒！直接用的$.ajax(ajaxParam)实现的。 -|-心好累
  21. 'dataRender':function(data){return data.data;},//必须，因为不清楚返回数据的格式，所以必须通过render方法进行定义
  22. 'control':{
  23. "previous":'table.previous()',//上一页,可以是其他第三方分页插件的API
  24. "next":'table.next()'//下一页，同上
  25. }//必须，分页控制等控件的详细配置
  26. });
  27. table.ajax();
  28. });

四、数据表格插件源码

  1. /*eguid的数据表格控件*/
  2. var Tables=(function(param){
  3. var isNull=function(s){return s==undefined||typeof(s)=='underfinded'||s==null||s==''};
  4. var getDom=function(id){return document.getElementById(id);};
  5. //数据处理
  6. var dataHandler=function(data){
  7. dataBody="";
  8. tableDom.find("tbody").html("");
  9. for(var i=0;i<pageSize;i++){
  10. var row=data[i];
  11. if(isNull(row)){//如果为空，说明数据结束
  12. break;
  13. }else{
  14. rowHandler(row,i);
  15. }
  16. }
  17. tableDom.find("tbody").append(dataBody);
  18. retData=data;
  19. var num=1;
  20. if(count>pageSize){
  21. var t1=count/pageSize;num=t1.toFixed(0);if(num<t1){++num;}
  22. }
  23. getDom("cupageTotal").innerHTML=num;
  24. }
  25. //处理一行数据
  26. var rowHandler=function(row,i){
  27. dataBody+="<tr>";
  28. var len=titleNum;
  29. for(field in fields){
  30. var col=row[field];
  31. var temp=len>0?"<td>":"<td style='visibility:hidden'>";
  32. len--;
  33. var render=fields[field]["render"];
  34. if(isNull(render)){
  35. temp+=(col+"</td>");
  36. }else{
  37. var renderRet=render(row,i+1,row[field]);
  38. temp+=(isNull(renderRet)?"":renderRet+"</td>");
  39. }
  40. dataBody+=temp;
  41. }
  42. dataBody+="</tr>";
  43. }
  44. //请求后预处理
  45. var ajaxHandler=function(data,type){
  46. if(!isNull(data)){
  47. var ret=dataRender(data);
  48. count=ret.count;
  49. dataHandler(ret.data);
  50. }
  51. };
  52. //新增ajax请求完成处理操作
  53. var ajaxReq=function (b){
  54. if(isNull(b)||!b){reloadParam();}
  55. var d={"pageSize":pageSize,"pageIndex":((pageIndex-1)*pageSize)};
  56. ajaxComParam.data=isNull(ajaxDataParam)?d:ajaxDataParam(d);
  57. $.ajax(ajaxComParam);
  58. };
  59. var pageNext=function(){
  60. if(pageIndex<(count/pageSize)){
  61. getDom("cuPageNum").innerHTML=++pageIndex;
  62. }
  63. var d={"pageSize":pageSize,"pageIndex":pageIndex};
  64. ajaxReq(true);
  65. return d;
  66. };
  67. var pagePrevious=function(){
  68. if(pageIndex>1){
  69. getDom("cuPageNum").innerHTML=--pageIndex;
  70. }
  71. var d={"pageSize":pageSize,"pageIndex":pageIndex};
  72. ajaxReq(true);
  73. return d;
  74. };
  75. var reloadParam=function(){
  76. getDom("cuPageNum").innerHTML=pageIndex=1;
  77. };
  78. //初始化表标题;id:表格ID,titles:标题列表,titleNum:标题数量(超出该数量的列自动隐藏),fields:字段
  79. var id=param.id,titles=param.titles,titleNum=0,fields=param.fields;
  80. //pageSize:分页数量，pageIndex:分页索引（当前页），count:数据总行数（count/pageSize等于总页数）
  81. var pageSize=isNull(param.pageSize)?10:param.pageSize,pageIndex=1,count;
  82. var ajaxComParam;//请求参数
  83. var ajaxDataParam;//ajax请求的data参数
  84. var dataRender=param.dataRender;//返回表格数据的具体位置定位
  85. var tableDom;//表格Dom
  86. var dataBody;//数据体node
  87. var retData;//保存每次接收到的ajax数据
  88. var control=param.control;//分页控件的配置
  89. /*字段值初始化*/
  90. var initTableHead=function(row){
  91. var thead= "<thead><tr>";
  92. for(title in titles){
  93. var conf=titles[title];
  94. var stl=isNull(conf.style)?"":" style='"+conf.style+"' ";
  95. var cla=isNull(conf.className)?"":" class='"+conf.className+"' ";
  96. thead+="<td"+stl+">"+title+"</td>";
  97. ++titleNum;
  98. }
  99. thead+="</tr></thead>";
  100. return thead;
  101. }
  102. var initTableBody=function(){
  103. var tbody="<tbody></tbody>";
  104. return tbody;
  105. }
  106. var initTableFoot=function(){
  107. var tfoot="<tfoot><tr>";
  108. tfoot+="<td colspan='"+titleNum+"'><span>总页数：</span><span id='cupageTotal'>"+1+"</span> <span>当前页：</span><span id='cuPageNum'>"+1+"</span>";
  109. tfoot+=" <button onclick='"+(isNull(control.previous)?'javascript:void(0);':control.previous)+"'> 上一页 </button> <button onclick='"+(isNull(control.next)?'javascript:void(0);':control.next)+"'> 下一页 </button>"
  110. tfoot+="</td></tr></tfoot>";
  111. return tfoot;
  112. }
  113. var initTableNode=function(){
  114. tableDom=$(id).append(initTableHead(titles)+initTableBody()+initTableFoot());
  115. }
  116. var initAjaxParam=function(){
  117. ajaxComParam=param.ajaxParam;
  118. if(ajaxComParam.data.constructor===Function){
  119. ajaxDataParam=ajaxComParam.data;
  120. }
  121. ajaxComParam.success=ajaxHandler;
  122. }
  123. var initAll=function(){
  124. initAjaxParam();
  125. initTableNode();
  126. };
  127. initAll();
  128. //公开接口
  129. return{
  130. ajax:ajaxReq,//异步加载
  131. json:dataHandler,//嘛，直接导入json
  132. next:pageNext,//下一页
  133. previous:pagePrevious,//上一页
  134. }
  135. });

话说开放的API只有四个（不算初始化的话），如果要增加一些API可以自己在return的对象中自行加入即可

相关文章