mytable.js 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
  1. (function($) {
  2. 'use strict';
  3. var con;
  4. var options;
  5. var curDatas;
  6. var element;
  7. var obj;
  8. /**
  9. * Datatable class
  10. *
  11. * @param object element DOM element or jquery element
  12. * @param object options Datatable options
  13. */
  14. var mytable = function(element, options, flag) {
  15. // default options
  16. var DEFAULTS = {
  17. isShoWPager:true,
  18. pager:{
  19. page_size:10
  20. }
  21. };
  22. this.options = $.extend({}, DEFAULTS, options);
  23. this.element = element;
  24. // this.options = options;
  25. this.pager = options.pager;
  26. this.con = $(element);
  27. this.obj = this;
  28. $(element).html('');
  29. if(flag) return;
  30. $(element).append('<div class="row"><div id="my_table" data-checkable="true" data-sortable="true"></div></div>'
  31. + '<div id="kkpager" class="row" style="text-align:center"></div>');
  32. this.getRemoteData(element,this.options,this);
  33. return this;
  34. };
  35. // Get options
  36. mytable.prototype = {
  37. getRemoteData:function(element,options,obj){
  38. if(!element) element = this.element;
  39. if(!options) options = this.options;
  40. var url = options.url;
  41. var p_cur = 1;
  42. var pager = options.pager;
  43. this.getServerData(p_cur, options, element, obj);
  44. },
  45. getRemoteData1:function(p_cur){
  46. this.getServerData(p_cur, this.options, this.element, this.obj);
  47. },
  48. getServerData:function(p_cur, options, element, obj){
  49. var url = options.url;
  50. var pager = options.pager;
  51. var page_size = pager.page_size;
  52. var param = options.param;
  53. // var obj = this.obj;
  54. post_common_service(url+"/"+p_cur+"/"+page_size, param, function(data) {
  55. // $(element).html("");
  56. // 这边把请求过来的数据缓存到table选择器中
  57. $(element).data("data_cache",data.list);
  58. element.tt_data=data.list;
  59. options.tableData=data.list;
  60. obj.setTable(data.list,element, options,p_cur);
  61. if(obj.options.pager){
  62. options.pager = {
  63. page_size:10,
  64. p_cur : data.pageNum, //页号
  65. p_pages:data.pages, //总页码
  66. p_totalRecords:data.total
  67. // 'cb':'getRemoteData
  68. }
  69. obj.setPager();
  70. }
  71. if(data.list.length<=0){
  72. $("#kkpager").css("display","none");
  73. }else{
  74. $("#kkpager").css("display","block");
  75. }
  76. }, function(error) {
  77. alert(error);
  78. });
  79. },
  80. setTable:function(datas, element, options,p_cur) {
  81. var cols = options.cols;
  82. var tableData = datas;
  83. // var pager = options.pager;
  84. clearTable(cols);
  85. var rowData = formatTableData(tableData, cols, p_cur);
  86. // 使用data参数更新数据:
  87. $('#my_table').datatable('load',{
  88. cols: cols,
  89. rows:rowData
  90. }
  91. );
  92. function formatTableData(data,cols,p_cur){
  93. var rows = [];
  94. for(var i=0;i<data.length;i++){
  95. data[i].num=(p_cur-1)*10+i+1;
  96. rows.push(genRow(data[i],cols));
  97. }
  98. return rows;
  99. }
  100. function genRow(obj,cols){
  101. var row = {checked: false, data:null};
  102. var dArr=[];
  103. for(var i=0;i<cols.length;i++){
  104. if(cols[i].func!=null){
  105. dArr.push(cols[i].func(obj[cols[i].field]));
  106. }else if(cols[i].type=="imagedd"){
  107. var pics = obj[cols[i].field];
  108. var picStr='';
  109. if(pics){
  110. var picArr = pics.split(',');
  111. for(var j in picArr){
  112. var pic = '<a class="lightbox-toggle" href="'+picArr[j]+'" style="width:60px;height:50px;">'
  113. + '<img class="pic-class img-thumbnail" style="width:60px;height:50px;" src="'+picArr[j]+'" alt="">'
  114. + '</a>';
  115. picStr+=pic;
  116. }
  117. }
  118. dArr.push(picStr);
  119. }else if(cols[i].oper!=null) {
  120. var oper = cols[i].oper;
  121. var operStr="";
  122. for(var j=0;j<oper.length;j++){
  123. operStr+='&nbsp;<a href="#" onclick="'+oper[j].func+'('+obj[cols[i].field]+','+obj[cols[i].field_other]+')"><i class="icon '+oper[j].icon_class+'"></i>'+oper[j].text+' </a>&nbsp;';
  124. }
  125. dArr.push(operStr);
  126. }else{
  127. if(cols[i].type == "date"){
  128. if(cols[i].custom){
  129. dArr.push(timeStamp2String(obj[cols[i].field],cols[i].date_type) + cols[i].custom);
  130. }else{
  131. dArr.push(timeStamp2String(obj[cols[i].field],cols[i].date_type));
  132. }
  133. }else if(obj[cols[i].field]){
  134. if(cols[i].custom){
  135. dArr.push(obj[cols[i].field] + cols[i].custom);
  136. }else{
  137. dArr.push(obj[cols[i].field]);
  138. }
  139. }else{
  140. dArr.push('0');
  141. }
  142. }
  143. }
  144. row.data=dArr;
  145. return row;
  146. }
  147. function clearTable(cols){
  148. $('#my_table').datatable( {
  149. checkable:false,
  150. sortable:false,
  151. data: {
  152. cols: cols,
  153. rows:[]
  154. }
  155. });
  156. }
  157. },
  158. setPager:function(data) {
  159. var pager = this.options.pager;
  160. var p_cur = pager.p_cur;
  161. var p_pages = pager.p_pages;
  162. var p_totalRecords = pager.p_totalRecords;
  163. var obj=this;
  164. kkpager.generPageHtml({
  165. pno : p_cur,
  166. total : p_pages,
  167. totalRecords : p_totalRecords,
  168. mode : 'click',
  169. click : function(n){
  170. obj.options.pager.p_cur = n;
  171. this.selectPage(n);
  172. obj.getRemoteData1(n);//调用获取数据方法
  173. return false;
  174. }
  175. },true);
  176. }
  177. };
  178. $.fn.mytable = function(options) {
  179. if (typeof options == 'string') {
  180. switch (options) {
  181. case 'getTableData':
  182. return this[0].tt_data;
  183. case 'empty':
  184. return new mytable(this,options,true);
  185. }
  186. } else{
  187. return this.each(function() {
  188. // var $this = $(this);
  189. new mytable(this,options);
  190. // $(this).attr('tableData',mytable.tableData);
  191. });
  192. }
  193. };
  194. $.fn.mytable.Constructor = mytable;
  195. }(jQuery));