jQuery datatables插件
来源:互联网 发布:中国特色社会主义 知乎 编辑:程序博客网 时间:2024/06/04 18:18
最近在做的工作涉及到一部分关于js的东西,好久没有写过js了,一开始还有点不适应,写了一个很简单的表格填充数据的方法,查了好多博客以及官网,并没有找到我想要的结果,比较分散,为了方便大家以后也碰到关于datatables的使用问题,特此记录一下,代码如下:
$('#example').DataTable({ "processing": true, "serverSide": true,//设置为服务端请求 "searching": false,//隐藏搜索框,使用自定义查询 "iDisplayLength": 10,//设置默认显示页容量 "pagingType": "full_numbers", "ajax": { "url": "your action url", "contentType": "application/json", "type": "POST", "cache":false, "data":function (queryParams) { //这一步是获取前端的查询参数,官网上并没有详细的介绍(我没找到),还有一种方式是用回调,看个人的喜好了。 queryParams.startTime = $('#startTime').val(); queryParams.endTime = $('#endTime').val(); queryParams.start=queryParams.start/queryParams.length+1; queryParams.limit=queryParams.length; return JSON.stringify(queryParams); }, dataFilter: function(data){ //这一步是渲染table,填充数据,网上大部分是用回调,用这种方式的很少,推荐大家用此种方式 var json = jQuery.parseJSON(data); json.recordsTotal = json.total; json.recordsFiltered = json.total; json.data = json.data; return JSON.stringify(json); } }, "columns": [ {"data":"provinceName" },//省/市名称 {"data":"shows" },//曝光 {"data":"clicks" },//点击 {"data":"clickRate" },//点击率 {"data":"requests"},//请求 {"data":"responses"}, //返回 {"data":"revenue" },//收入 {"data":"ecpm"},//ecpm {"data":"cpc"} //cpc ], "columnDefs": [//格式化列 { "render":function ( data){ return data+'%'; }, "targets": 3},{ "render": function ( data){ return formatMoney(data,2) }, "targets": 6 } ], "language": { "lengthMenu": page.lengthMenu, "zeroRecords": page.zeroRecords, "info": page.info, "infoEmpty":"", "sProcessing": page.sProcessing, "paging":false, "oPaginate": { "sFirst": page.sFirst, "sPrevious": page.sPrevious, "sNext": page.sNext, "sLast": page.sLast }, } });
var page ={ lengthMenu:"每天显示 _MENU_ 条", zeroRecords:"没有符合条件的记录", info:"当前显示第 _START_ 至 _END_ 条,_TOTAL_ 条记录,共 _PAGES_ 页", infoEmpty:"没有找到符合条件的结果", infoFiltered:"从总记录中查询", sProcessing:'正在努力的加载中...', sFirst:'首页', sPrevious:'上一页', sNext:'下一页', sLast:'最后一页'}
金额格式化函数
function formatMoney(number, decimal) { /* * 参数说明: * number:要格式化的数字 * decimal:保留小数位数 * */ decimal = decimal > 0 && decimal <= 20 ? decimal : 2; number = parseFloat((number + "").replace(/[^\d\.-]/g, "")).toFixed(decimal) + ""; var l = number.split(".")[0].split("").reverse(); var r = number.split(".")[1]; var t = ""; for (var i = 0; i < l.length; i++) { t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : ""); } return t.split("").reverse().join("") + "." + r;}
阅读全文
0 0
- jQuery 的插件 dataTables
- jquery插件dataTables
- jquery插件之DataTables
- Jquery 表格插件DataTables
- jquery插件之DataTables
- jquery插件之DataTables
- jQuery datatables插件
- jquery dataTables插件详解
- jQuery dataTables表格插件入门
- JQuery表格插件之Datatables
- Jquery插件之DataTables初探
- jQuery的表格插件datatables
- JQuery DataTables插件中文文档
- JQuery插件DataTables的使用
- jquery表格插件datatables应用实例
- jquery表格插件datatables应用实例
- jquery插件之DataTables 详细参数说明
- jQuery的DataTables插件的使用方法[转]
- Timer动态管理
- QNX车载操作系统音频功能扩展Acoustics for Voice 3.0-qnx的音频降噪技术
- Hadoop环境搭建
- Brackets 常用插件, 汉化方法及其配置
- “The left-hand side of an assignment must be a variable” problem with charAt
- jQuery datatables插件
- android O正式包即将发布,你准备好了吗
- UVA 11300 Spreading the Wealth
- 求大佬解释下ptrace的pt_regs的定义,而且分为i386 arm x86和aarch64的不同分支
- HttpClient的GET和POST解析
- mysql导出所有用户权限脚本
- 《数据库SQL实战》从titles表获取按照title进行分组
- 数据库系统原理
- HDU 3974 Assign the task——线段树