datatables 添加复选框及序号列及使用ajax请求

Ajax 前端之家
前端之家收集整理的这篇文章主要介绍了datatables 添加复选框及序号列及使用ajax请求，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

1.页面引入样式 和 js 文件


2. html 代码

  1. <table id="keeperUserList" class="display table table-striped table-bordered table-hover table-checkable">
  2.      <thead>
  3. <span style="white-space:pre">	</span><tr>
  4. 	   <th>
  5.                  <label class="mt-checkBox mt-checkBox-single mt-checkBox-outline">
  6.                       <input type="checkBox" name="keeperUserGroup-checkable" class="group-checkable" data-set="#sample_1 .checkBoxes" />
  7.                       <span></span>
  8.                   </label>
  9.             </th>
  10. 	    <th class="text-center">序号</th>
  11. 	    <th class="text-center">姓名</th>
  12. 	    <th class="text-center">性别</th>
  13. 	    <th class="text-center">手机号码 </th>
  14. 	    <th class="text-center">所属门店 </th>
  15. 	    <th class="text-center">所属职位 </th>
  16. 	    <th class="text-center">账号状态</th>
  17. 	    <th class="text-center">注册时间 </th>
  18. 	    <th class="text-center">操作</th>
  19.         </tr>
  20.      </thead>
  21.      <tbody></tbody>
  22. </table>

3. js 代码 
  1. /**
  2.  * 初始化列表
  3.  */
  4. function initKeeperUserListTable() {
  5. 	
  6. 	keeperUserList = $('#keeperUserList').DataTable({
  7. 		// ajax配置为function,手动调用异步查询
  8. 		ajax : {
  9. 			type: "GET",url: ctxFront + '/crm/keeper/account/list',// 传入已封装的参数
  10. 			data: function(data){
  11. 				data.page = data.start / data.length + 1;
  12. 				data.limit = data.length;
  13. 				// 右上角搜索
  14. 				data.keyword = data.search.value;
  15. 				data.version = CONSTANT.APISERVER.KEEPER;
  16. 				delete data.columns;
  17. 			},dataType: "json",dataSrc : function(result) {
  18. 				// 后台不实现过滤功能，每次查询均视作全部结果
  19. 				result.recordsTotal = result.data.totalCount;
  20. 				result.recordsFiltered = result.data.totalCount || 0;
  21. 				result.data = result.data.kavs || {};
  22. 				delete result.data.totalCount;
  23. 				delete result.data.kavs;
  24. 				return result.data;
  25. 			}
  26. 		},scrollX : true,// 每次对 datatable 进行操作时也是请求后台
  27. 		serverSide : true,// 加载状态
  28. 		processing : true,// 默认排序查询,为空则表示取消默认排序否则复选框一列会出现小箭头
  29. 		order: [],// 分页,默认打开
  30. 		paging : true,// 是否禁用原生搜索
  31. 		searching: true,language : CONSTANT.DATA_TABLES.DEFAULT_OPTION.LANGUAGE,columns : [
  32. 		    CONSTANT.DATA_TABLES.COLUMN.CHECKBox,{
  33. 		    	data : null,bSortable : false,targets : 0,width : "30px",render : function(data,type,row,Meta) {
  34. 		    		// 显示行号
  35. 					var startIndex = Meta.settings._iDisplayStart;
  36. 					return startIndex + Meta.row + 1;
  37. 	            }
  38. 		    },{
  39. 				data : 'name',width : "130px",},{
  40. 				data : 'passportv.sex',className : "text-center",Meta) {
  41. 					return getKeeperUserSex(data);
  42. 				}
  43. 			},{
  44. 				data : '.passportv.phone',width : "60px",Meta) {
  45. 					data = data || "";
  46. 					return '<span title="' + data + '">' + data + '</span>';
  47. 				}
  48. 			},{
  49. 				data : 'storev.name',width : "70px",{
  50. 				data : 'position',Meta) {
  51. 					return getKeeperUserPosition(data);
  52. 				}
  53. 			},{
  54. 				data : 'status',Meta) {
  55. 					return getKeeperUserStatus(data);
  56. 				}
  57. 			},{
  58. 				data : 'creationDate',Meta) {
  59. 					return dateForamtToString(data,'yyyy-MM-dd hh:mm:ss');
  60. 	            }
  61. 			},{
  62. 				data : 'operate',visible : true,width : '200px',full) {
  63. 					
  64. 					if (!full.passportv) {
  65. 						return '';
  66. 					}
  67. 					
  68. 					var edit = '<button onclick="editKeeperUserInfo(' + full.passportv.id + ')" class="btn btn-sm green btn-outline filter-submit margin-bottom">修改</button>';
  69. 					var del = '<button onclick="deleteKeeperUser(' + full.passportv.id + ');" class="btn btn-sm red btn-outline filter-cancel">删除</button>';
  70. 					var stop = '<button onclick="stopKeeperUser(' + full.passportv.id + ');" class="btn btn-sm red btn-outline filter-cancel">冻结</button>';
  71. 					var unseal = '<button onclick="unsealKeeperUser(' + full.passportv.id + ');" class="btn btn-sm red btn-outline filter-cancel">解冻</button>';
  72. 					var detail = '<a target="_blank" href="' + ctxFront + '/crm/keeper/account/info?id=' + full.passportv.id + '" class="btn btn-sm purple btn-outline filter-cancel">详情</a>';
  73. 					
  74. 					var result = edit;
  75. 					
  76. 					if(full.status == 0){
  77. 						result += stop + del + detail;
  78. 					}else if(full.status == 1){
  79. 						result += unseal + del + detail;
  80. 					}
  81. 					return result;
  82. 				} 
  83. 			} 
  84. 		],drawCallback : function() {
  85. 			// 取消全选
  86. 			$(":checkBox[name='keeperUserGroup-checkable']").prop('checked',false);
  87. 		},createdRow : function(row,data,dataIndex) {
  88. 			
  89. 			if (data.status == 1) {
  90. 				// 已冻结
  91. 				$(row.children[7]).addClass('danger');
  92. 			} else if (data.status == 2) {
  93. 				// 已停用
  94. 				$(row.children[7]).addClass('warning');
  95. 			} else if (data.status == 3) {
  96. 				// 已注销 
  97. 				$(row.children[7]).addClass('error');
  98. 			}
  99. 		},buttons : [ 
  100. 		    {
  101. 		    	text : '<li class="fa fa-plus"></li> 新增',titleAttr : '新增管家账号',className : "btn green",action: function ( e,dt,node,config ) {
  102. 					keeperUserIsupdate = false;
  103. 					clearKeeperUserFormData();
  104. 					// 重置form校验
  105. 					FormValidation.resetForm();
  106. 					$('#editKeeperUserWin .modal-title').text('新增管家信息');
  107. 					$('#editKeeperUserWin').modal('show');
  108.                 }
  109. 			},{
  110. 				text : '<li class="fa fa-search"></li> 搜索',titleAttr : '按条件搜索',className : "btn btn-sm green btn-outline filter-submit margin-bottom",config ) {
  111. 					$('#queryKeeperUserWin').modal({
  112. 						show : true
  113. 					});
  114. 				}
  115. 			},{
  116. 				extend : "print",className : "btn dark btn-outline"
  117. 			},{
  118. 				extend : "pdf",className : "btn green btn-outline"
  119. 			},{
  120. 				extend : "excel",className : "btn yellow btn-outline"
  121. 			} 
  122. 		],dom:"<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>"
  123.  
  124. 	});
  125. 	
  126. 	// 如果 scrollX : true 使用这个$('#keeperUserList_wrapper').on("change",":checkBox",function() {
  127. 	// 如果 scrollX : false $('#keeperUserList').on("change",function() { 
  128. 	// 因为  scrollX : true 为true加了滚动条，表头和表体成了两个表格，这个可以查看代码就知道
  129. 	$('#keeperUserList_wrapper').on("change",function() {
  130. 		// 列表复选框
  131. 	    if ($(this).is("[name='keeperUserGroup-checkable']")) {
  132. 	        // 全选
  133. 	        $(":checkBox",'#keeperUserList').prop("checked",$(this).prop("checked"));
  134. 	    }else{
  135. 	        // 一般复选
  136. 	        var checkBox = $("tbody :checkBox",'#keeperUserList');
  137. 	        $(":checkBox[name='cb-check-all']",'#keeperUserList').prop('checked',checkBox.length == checkBox.filter(':checked').length);
  138. 	    }
  139. 	}).on('preXhr.dt',function(e,settings,data) {
  140. 		// ajax 请求之前事件
  141. 		data.page = data.start / data.length + 1;
  142. 		data.limit = data.length;
  143. 		data.version = CONSTANT.APISERVER.KEEPER;
  144. 		delete data.columns;
  145. 	});
  146. 	
  147. 	// 搜索框事件
  148. 	$('#keeperUserList_filter input').unbind().keyup(function() {
  149. 		
  150. 		var params = {};
  151. 			
  152. 		if ($(this).val().trim()) {
  153. 			params.keyword = $(this).val().trim();
  154. 		}
  155. 		keeperUserList.settings()[0].ajax.data = params;
  156. 		keeperUserList.ajax.reload();
  157. 	});
  158. 	
  159. }
  160.  
  161. /**
  162.  * 搜索 这个搜索解决datatable自定义搜索
  163.  */
  164. function queryKeeperUserList() {
  165.  
  166. 	// 添加参数
  167. 	var params = {};
  168. 	
  169. 	if ($('#queryKeeperUserName').val()) {
  170. 		params.name = $('#queryKeeperUserName').val();
  171. 	}
  172. 	if ($('#queryKeeperUserPhone').val()) {
  173. 		params.phone = $('#queryKeeperUserPhone').val();
  174. 	}
  175. 	if ($('#queryKeeperUserStatus').val() != '') {
  176. 		params.status = $('#queryKeeperUserStatus').val();
  177. 	}
  178. 	if ($('#queryKeeperUserPosition').val() != '') {
  179. 		params.position = $('#queryKeeperUserPosition').val();
  180. 	}
  181. 	if ($('#queryKeeperUserOrderBy').val()) {
  182. 		params.orderBy = $('#queryKeeperUserOrderBy').val();
  183. 	}
  184.  
  185. 	keeperUserList.settings()[0].ajax.data = params;
  186. 	keeperUserList.ajax.reload();
  187. 	$('#queryKeeperUserWin').modal('hide');
  188. }


变量js

  1. var CONSTANT = {
  2. 		
  3. 	// datatables常量
  4. 	DATA_TABLES : {
  5. 		DEFAULT_OPTION : { // DataTables初始化选项
  6. 			LANGUAGE : {
  7. 				sProcessing : "处理中...",sLengthMenu : "显示 _MENU_ 项结果",sZeroRecords : "没有匹配结果",sInfo : "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",sInfoEmpty : "显示第 0 至 0 项结果，共 0 项",sInfoFiltered : "(由 _MAX_ 项结果过滤)",sInfoPostFix : "",sSearch : "搜索:",sUrl : "",sEmptyTable : "表中数据为空",sLoadingRecords : "载入中...",sInfoThousands : ",",oPaginate : {
  8. 					sFirst : "首页",sPrevIoUs : "上页",sNext : "下页",sLast : "末页"
  9. 				},"oAria" : {
  10. 					"sSortAscending" : ": 以升序排列此列","sSortDescending" : ": 以降序排列此列"
  11. 				}
  12. 			},// 禁用自动调整列宽
  13. 			autoWidth : false,// 为奇偶行加上样式，兼容不支持CSS伪类的场合
  14. 			stripeClasses : [ "odd","even" ],// 取消默认排序查询,否则复选框一列会出现小箭头
  15. 			order : [],// 隐藏加载提示,自行处理
  16. 			processing : false,// 启用服务器端分页
  17. 			serverSide : true,// 禁用原生搜索
  18. 			searching : false
  19. 		},COLUMN : {
  20. 			// 复选框单元格
  21. 			CHECKBox : {
  22. 				className: "td-checkBox",orderable : false,data : "id",Meta) {
  23. 					var content = '<label class="mt-checkBox mt-checkBox-single mt-checkBox-outline">';
  24. 					content += '	<input type="checkBox" class="group-checkable" value="' + data + '" />';
  25. 					content += '	<span></span>';
  26. 					content += '</label>';
  27. 					return content;
  28. 				}
  29. 			}
  30. 		},// 常用render可以抽取出来，如日期时间、头像等
  31. 		RENDER : {
  32. 			ELLIPSIS : function(data,Meta) {
  33. 				data = data || "";
  34. 				return '<span title="' + data + '">' + data + '</span>';
  35. 			}
  36. 		}
  37. 	}
  38. 	
  39.  
  40. };

猜你在找的Ajax相关文章

网页的异步请求（Ajax）
JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表...
手动实现AJAX
AJAX 每日更新前端基础，如果觉得不错，点个star吧 &#128515; https://github.com/Win...
axios异步提交表单数据的不同形式
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...
php的ajax简单实例
很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...
Json与Ajax(注册实例）
需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: &quot;./serv...
jSon和Ajax登录功能，ajax数据交互案例
ajax实例，检测用户与注册 检测用户名是否被占用： 在用户填写完用户名之后，ajax会异步向...
关于AjaxControlToolkit的样式问题
网(LieHuo.Net)教程 技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...
一个简单的AJAX实现(HELLO AJAX)
客户端部分： <html> <head> <meta http-equiv="Content-Type" ...
AJAX中文乱码的两类问题及解决之策
1）发送路径中的参数有中文，在服务器段接收参数值是乱码 例如： var url=”a.jsp?na...
实例：AJAX返回xml代码如何在网页中显示
建站学院（LieHuo.Net）文档 今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作