不接地气的jquery datatables,以后你还会用吗
2016-01-25 15:10
585 查看
最近用了下jquery dataTables,感觉很不接地气,没做过的人,要想实现一个简单的多条件查询,光看官网教程,那都得折腾你一翻,最后发现并非从官网找到答案。
1、分页注意
总之,感觉不太好使
还是用bsgrid接地气
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接地气
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- JavaScript 各种遍历方式详解
- 数组方法汇总
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码
- 使用Browserify配合jQuery进行编程的超级指南
- jquery如何实现在加载完iframe的内容后再进行操作
- jquery $.ajax()取xml数据的小问题解决方法
- jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法