不接地气的jquery datatables,以后你还会用吗

最近用了下jquery dataTables,感觉很不接地气,没做过的人,要想实现一个简单的多条件查询,光看官网教程,那都得折腾你一翻,最后发现并非从官网找到答案。

1、分页注意

iDisplayLength的值必须包涵在<span style="font-family: Arial, Helvetica, sans-serif;">aLengthMenu中</span>
<span style="font-family: Arial, Helvetica, sans-serif;">2、查询条件使用</span><pre name="code" class="javascript">fnServerParams
</pre><p></p><pre>
<span style="font-family: Arial, Helvetica, sans-serif;">
</span>

loadDataTable : function(paramObj){
			var self = this;
			//加载表格
			self.dataTable = $('#cyzsqcx_table').DataTable({
				//"responsive": true,
				"sPaginationType" : "full_numbers",
				//'bLengthMenu': 1 ,
				"ordering": false,
        		"info":     false,
        		"paging":true,
        		//"bFilter" : false,
        		//"searching":true,
        		//"bServerSide": true , 
        		//"aLengthMenu":10,
        		"processing":false,
        		"lengthChange":false,         	 	
        	 	"aLengthMenu": [[ 7, 10, 20, -1 ], [ 4, 10, 20, "所有" ]],  
        	 	"iDisplayLength":10 ,
        		"language":{
			        paginate: {
			            first:    '首页',
			            previous: '上一页',
			            next:     '下一页',
			            last:     '末页'
			        },
			        aria: {
			            paginate: {
			                first:    '首页',
			                previous: '上一页',
			                next:     '下一页',
			                last:     '末页'
			            }
			        },
			        'sEmptyTable':'数据为空',
			        'zeroRecords':'未找到相关数据'
			    } ,
			     
			   "fnServerParams" : function (aoData) {
					aoData.push({ name: "ventureType",value:  $('#cyzsqcx_tab li:eq(1) a[class="act"]').attr('data-tabid')  } );
					aoData.push({ name: "venturerIntentIndustry",value:  $('#cyzsqcx_tab li:eq(2) a[class="act"]').attr('data-tabid')  } );
					aoData.push({ name: "status",value:  $('#cyzsqcx_tab li:eq(3) a[class="act"]').attr('data-tabid')  } );
					aoData.push({ name: "venturerName",value: $('#cysqlb_xm').val().trim()  } );
					aoData.push({ name: "venturerMobile",value: $('#cysqlb_dh').val().trim()  } ); 
				} ,	
			 			
			    "ajax" : {
					"url" :  comm.domainList.scs+comm.UrlList.queryVentureApplyList,   
					"type" : "GET",
					"dataType": "json",              
					"contentType": "application/json",
					//"data" : paramObj  ,
					"complete": function(data){ 
						var data = $.parseJSON(data.responseText).data;
						if (!data.length){
							$('#cyzsqcx_table').next().addClass('none');
						} else {
							$('#cyzsqcx_table').next().removeClass('none');
						}
					}
				},   
				 
			     columns: [
			        { data: 'venturerName' },
			        { data: 'venturerSex' },
			        { data: 'venturerBirthday' },
			        { data: 'venturerMobile'},
			        { data: 'applyTime' },
			 		{ data: 'venturerNativePlace' },
			 		{ data: 'venturerIntentIndustry' },
			 		{ data: 'ventureType' },
			 		{ data: 'status' },
			 		{ data: 'status' },			 	 
			 		{ data: 'status' },
			    ] ,   
			    
			     "fnRowCallback" : function(nRow, aData, iDisplayIndex) {   
                        return nRow;  
                    },  
                 
			    	 "columnDefs": [
			    	 {
			    	 	"targets": 2,  
			            "data": null ,  
			    	 	"render": function(data, type, row) {  
				            	var html = row.venturerBirthday.substr(0,10)   ;	   
				                return html; 
			                } 
			    	 } ,
			    	 {
			    	 	"targets": 4,  
			            "data": null ,  
			    	 	"render": function(data, type, row) {  
				            	var html = row.applyTime.substr(0,10)   ;			   
				            	//var html = row.createTime  ;		 
				                return html; 
			                } 
			    	 } , 
			    	 {  			        
			            "targets": 6,  
			            "data": null ,  
			            "render": function(data, type, row) {  
			            	var html = '' ;			   
				            	switch(row.venturerIntentIndustry){
				            		case 1:
				            			html = '旅游'	;
				            			break;
				            		case 2:
				            			html = '美食'	;
				            			break;
				            		case 3:
				            			html = '休闲'	;
				            			break;
				            		case 4:
				            			html = '按摩'	;
				            			break;	
				            		case 5:
				            			html = '百货'	;
				            			break;			
				            		case 6:
				            			html = '美发'	;
				            			break;			
				            		case 7:
				            			html = '箱包'	;
				            			break;			
				            		case 8:
				            			html = '健身'	;
				            			break;										
				            	} 
				                return html; 
			            }
			         }, 
			    	 
			    	 {  			        
			            "targets": 7,  
			            "data": null ,  
			            "render": function(data, type, row) {  
				            	var html = '' ;			   
				            	switch(row.ventureType){
				            		case 1:
				            			html = '1型'	;
				            			break;
				            		case 2:
				            			html = '2型'	;
				            			break;
				            		case 3:
				            			html = '3型'	;
				            			break;
				            		case 4:
				            			html = '4型'	;
				            			break;				
				            	} 
				                return html; 
			                } 
			         }  ,		  
			        
			        {  			        
			            "targets": 9,  
			            "data": null ,  
			            "render": function(data, type, row) {  
			            	var html = '' ;			   
				            	switch(row.status){
				            		case 1:
				            			html = '未处理'	;
				            			break;
				            		case 2:
				            			html = '已接受'	;
				            			break;
				            		case 3:
				            			html = '已拒绝'	;
				            			break;				            	 
				            	} 
				                return html; 
			            }
			         } , 
			    	 { 
			            "targets": 10,  
			            "data": null,  
			            "render": function(data, type, row) {  			           
			            		var html = '<a href="javascript:void(0);" data-id="'+row.id+'"  data-cyzid="'+row.venturerId+'"   class="cy_table_xq" >详情 </a>'	;
			            		if ( row.status == 1  ) {
			            			html += '<a href="javascript:void(0);" data-id="'+row.id+'"   class="cy_table_js" >接收 </a><a href="javascript:void(0);" data-id="'+row.id+'"   class="cy_table_jj" >拒绝 </a>'  
			            		} else if ( row.state == 2 ){
			            		 
			            		} else if (row.state == 3){
			            			
			            		}  				              
				                return html;  
			            	}  
			           } 
			        ]  	   
			}); 
			//self.dataTable. 
			$('#cyzsqcx_table_filter').addClass('none');	 
  
		} 

总之,感觉不太好使

还是用bsgrid接地气

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值