不接地气的jquery datatables,以后你还会用吗
最近用了下jquery dataTables,感觉很不接地气，没做过的人，要想实现一个简单的多条件查询，光看官网教程，那都得折腾你一翻，最后发现并非从官网找到答案。
1、分页注意
iDisplayLength的值必须包涵在aLengthMenu中2、查询条件使用fnServerParams
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 = '详情 ' ;
if ( row.status == 1 ) {
html += '接收 拒绝 '
} else if ( row.state == 2 ){
} else if (row.state == 3){
}
return html;
}
}
]
});
//self.dataTable.
$('#cyzsqcx_table_filter').addClass('none');
} 总之，感觉不太好使
还是用bsgrid接地气