您的位置:首页 > Web前端 > JQuery

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

2016-01-25 15:10 585 查看
最近用了下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接地气
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  jquery datatables b