dataTable 基本设置

最新推荐文章于 2023-06-15 20:00:00 发布

i秋风伴落叶

最新推荐文章于 2023-06-15 20:00:00 发布

阅读量956

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript/Jquery dataTable

本文链接：https://blog.youkuaiyun.com/zxf1242652895/article/details/72459515

JavaScript/Jquery 同时被 2 个专栏收录

58 篇文章

订阅专栏

dataTable

15 篇文章

订阅专栏

本文介绍如何通过 jQuery DataTables 的高级配置选项实现复杂的表格功能，包括分页样式、排序控制、数据加载及处理等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，"sPaginationType": "full_numbers", //jquery datatable设置分页的格式，显示出来上一页，下一页和数字

2，"aaSorting": [[ 1, "desc" ]], //jquery datatable 设置某一列按什么排序

3,"aoColumnDefs": [ { "bSortable": false, "aTargets": [ 0 ] }] ,//jquery datatable取消某一列的排序功能

4，"bSort": false ，//jquery datatable取消全部的排序功能，

5，"bPaginate": true, //jquery datatable 是否使用分页功能

6,"bProcessing": true, //jquery datatable 显示正在处理的提示的loading

7，"iDisplayLength": 20, //jquery datatable默认每页显示多少条数据

8，"bFilter": true, //jquery datatable是否使用搜索功能

9，"bLengthChange": false, //jquery datatable 是否启用设置每页显示多少条

10，"bStateSave": false, //jquery datatable 保存状态到cookie ******很重要，当搜索的时候页面一刷新会导致搜索的消失。使用这个属性设置为true就可避免了

//dataTables 定义的全局变量

  dataTables = $('#datatable').DataTable({
  	  		    	   "createdRow": function ( row, data, index ) {
  	   		                 $(this,row).attr('data-toggle','modal').attr('data-target','.bs-example-modal-sm');//设置每一行的触发事件
   	  		         },
   	   		    	ajax:{
  	  		    		type:'POST',
  	  		        	url:'/massAnalysis/getMassAnalysis',
  	  		        	async:false,
  					dataSrc :[0],
  					data:function(data){
  							
  	 				var  qualityGetTimeAllBySelect=document.getElementById("qualityFenxiGetTime").innerHTML; 
  		     		  	var t0= qualityGetTimeAllBySelect.substring(0, 19);
  		     		       var t1 = qualityGetTimeAllBySelect.substring(22);
  	  	     		       var selectedValue=$("#dieCavityID option:selected").val();
  	  	     		       if(selectedValue==null){
  	  	     		    	   $("#spcContentTip").show();
  	  	     		    	$("#spctableContent").hide()//时间控件
  	  	     		    	  $("#qcID").hide();
  	  	     		       }else{
  	  	     		    	$("#spctableContent").show()//时间控件
	  	     		    	  $("#qcID").show();
  	  	     		    	 var die=selectedValue.substring(0,1);
  	 						data.mouldCode=modelCodes//data.mouldCode:mouldCode表示参数 data.参数=传过来的参数值
  	 						data.t0=t0
  	 						data.t1=t1
  	 						data.cavityIndex=die
  	  	     		       }
   						}
   	   		    	},
  	   		    	columnDefs: [
  	   		    	          { 
  	   		    	        	 targets:0 ,
  	    		    	         data: [0],
  	   		    	         	 render: function (data) {
  	   	   		  		        	var time=formatDate(data);//转换时间格式
  	  	  		  		        	var data="2"+time.substring(1);// 获取采样时间
  	   		    	         		return data;
  	   		    	         	 }  
  	   		    	          },
   	   		    	          { targets:1, data: [1]},
  	   		    	          { targets:2, data: [2]},
   	   		    	         ],
  			   		 language : {
  							"sProcessing" : "处理中...",
  							"sLengthMenu" : "显示 _MENU_ 项结果",
  							"sZeroRecords" : "没有匹配结果",
  							"sInfo" : "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
  							"sInfoEmpty" : "显示第 0 至 0 项结果，共 0 项",
  							"sInfoFiltered" : "(由 _MAX_ 项结果过滤)",
  							"sInfoPostFix" : "",
  							"sSearch" : "搜索:",
  							"sUrl" : "",
  							"sEmptyTable" : "表中数据为空",
  							"sLoadingRecords" : "载入中...",
  							"sInfoThousands" : ",",
  							"oPaginate" : {
  								"sFirst" : "首页",
  								"sPrevious" : "上页",
  								"sNext" : "下页",
  								"sLast" : "末页"
  							},
  							"oAria" : {
  								"sSortAscending" : ": 以升序排列此列",
  								"sSortDescending" : ": 以降序排列此列"
  							}
  						}

});