dataTable插件的使用
var table;
table = $("#example").dataTable({
"sDom": "<'top'f<'clear'>>t<'bottom'ilpr<'clear'>>",
"deferLoading": 10,首次不请求接口的初始化表格
"bRetrieve": true, //用于指明当履行dataTable绑按时，是否返回DataTable对象
"bProcessing": true, //以指定当正在处理惩罚数据的时辰，是否显示“正在处理惩罚”这个提示信息
"bServerSide": true, //通过服务端来取数据,是否阻止分页
"bAutoWidth": true, //是否主动策画表格各列宽度 false
"ordering":false, //禁用排序去掉图标
"bFilter": false, //是否启用客户端过滤功能
"sort": "position",
"aaSorting": [ //指定按多列数据排序的根据
[0, "desc"]
],
"bStateSave": false, //是否打开客户端状况记录功能
"iDisplayLength": 10, //用于指定一屏显示的条数，需开启分页器
"iDisplayStart": 0, //用于指定从哪一条数据开端显示到表格中去
"dom": "Bfrtip",
"fnServerParams": function(aoData) {
aoData.push({
"name": "gameId", //游戏id
"value": $('#gameId').val()
}, {
"name": "name", //姓名
"value": $('#name').val()
}, {
"name": "tel", //电话
"value": $('#tel').val()
}, {
"name": "startDate",
"value":$("#startDate").val()
},{
"name":"endDate",
"value":$("#endDate").val()
},
{
"name": "cityCode",
"value": $('#cityCode').val()
}, {
"name": "districtCode",
"value": $('#districtCode').val()
},{
"name":"provinceCode",
"value":$("#provinceCode").val()
}); },
"fnDrawCallback": function(oSettings) {
var api = this.api();
var startIndex= api.context[0]._iDisplayStart;//获取到本页开始的条数
api.column(0).nodes().each(function(cell, i) {
cell.innerHTML = startIndex + i + 1;
});
$("tr").parents("tbody").children(":last-child").children(":nth-child(6)").children().addClass("hoves")
$("tr").parents("tbody").children(":nth-child(9)").children(":nth-child(6)").children().addClass("hoves")
$("tr").parents("tbody").children(":last-child").children(":nth-child(7)").children().addClass("hoves")
$("tr").parents("tbody").children(":nth-child(9)").children(":nth-child(7)").children().addClass("hoves")
$(".experience1").unbind('hover').hover(function(){
$(this).next().toggle();
}).unbind('hover'),
$(".origin1").unbind('hover').hover(function(){
$(this).next().toggle();
}).unbind('hover')
}, //draw画 ，这个应该是重绘的回调函数
"sAjaxSource": "${base}/joinBusiness/getPartnerList?stage=1", //请求地址
// "sAjaxSource": "http://172.16.81.36/operate/joinBusiness/getPartnerList", //请求地址
"sServerMethod":"POST",
"sScrollX": "100%", //是否开启程度迁移转变，以及指定迁移转变区域大小
"bScrollCollapse": true, //指定恰当的时辰缩起迁移转变视图
"aoColumns": [{ //数据表列值
"mDataProp": "",
"orderable": false, // 禁用排序
"sDefaultContent": "",
"bSortable": false,
"aTargets": [0]
}, {
"mDataProp": "name",
"sDefaultContent": "",
"bSortable": false,
"aTargets": [1]
}, {
"mDataProp": "tel",
"sDefaultContent": "",
"bSortable": false,
"aTargets": [2]
}, {
"mDataProp": "wechat",
"sDefaultContent": "",
"bSortable": false,
"aTargets": [3]
}, {
"mDataProp": "", //合作区域
"sDefaultContent": "",
"mRender": function(data,type,full){
var provinceName = full.provinceName!=null?full.provinceName:'';
var cityName = full.cityName!=null?full.cityName:'';
var districtName = full.districtName!=null?full.districtName:'';
var str;
str="<div><p>"+provinceName+"</p><p>"+cityName+"</p><p>"+districtName+"</p></div>";
return str; },
"bSortable": false,
"aTargets": [4]
}, {
"mDataProp": "experience",
"sDefaultContent": "",
"bSortable": false,
"mRender": function(data,type,full){
if(full.experience!=null){
var str = full.experience;
var strs = [];
var s=0;
var length=0;
var flag=0;
var domTd='';
for(var i=0;i<str.length;i++){
s++;
if(/[\u4e00-\u9fa5]/.test(str.charAt(i))){
s++;
}
}
for(var i=0;i<str.length;i++){
flag++;
if(/[\u4e00-\u9fa5]/.test(str.charAt(i))){
flag++;
}
if(flag>30){
break;
}
length++;
} if(s>30){
str=str.substr(0,length);
var times = Math.ceil(str.length/7);
for(var i=0;i<times;i++){
strs.push(str.slice(i*7,(i+1)*7));
}
domTd='<p tabindex="0" class="experience experience1" role="button" data-toggle="popover" data-trigger="focus" data-content="And heres some amazing content Its very engaging Right?">'+strs.join("</br>")+'...</p><div>'+full.experience+'</div>'
}else{
domTd='<p class="experience experience1" >'+str+'</p><div>'+full.experience+'</div>'
}
return domTd;
}
},
}, {
"mDataProp": "origin",
"sDefaultContent": "",
"bSortable": false,
"mRender": function(data,type,full){
// console.log(full)
if(full.origin==1){
return "<p class='origin origin1'>"+full.gameName+"公众号</p><div>"+full.gameName+"公众号</div>"
}else if(full.origin==2){
return "<p class='origin origin1' >"+full.gameName+"客户端</p><div>"+full.gameName+"客户端</div>"
}
},
"aTargets": [6]
}, {
"mDataProp": "isVip",
"sDefaultContent": "",
"bSortable": false,
"mRender": function(data,type,full){
if(full.isVip==1){
return "<p class='isVip isVip1'>是</p>"
}else if(full.isVip==2){
return "<p class='isVip isVip1'>否</p>"
}else{
return "<p class='isVip isVip1'></p>"
}
},
"aTargets": [7]
}, {
"mDataProp": "referrer",
"sDefaultContent": "",
"bSortable": false,
"aTargets": [8]
}, {
"mDataProp": "",
"sDefaultContent": "",
"mRender": function(data,type,full){
var str = '';
str += '<@shiro.hasPermission name="oop_join_business_pass"><a class="adopt" style="color:#1ab394" href="${base}/joinBusiness/toPass?tel='+full.tel+'&name='+full.name+'&id='+full.id+'&wechat='+full.wechat+'&experience='+full.experience+'&provinceCode='+full.provinceCode+'&cityCode='+full.cityCode+'&provinceName='+full.provinceName+'&cityName='+full.cityName+'&districtName='+full.districtName+'">通过</a></@shiro.hasPermission> <@shiro.hasPermission name="oop_join_business_nopass"><a href="${base}/joinBusiness/toRefuse?tel='+full.tel+'&name='+full.name+'&id='+full.id+'&wechat='+full.wechat+'&experience='+full.experience+'&provinceCode='+full.provinceCode+'&cityCode='+full.cityCode+'&provinceName='+full.provinceName+'&cityName='+full.cityName+'&districtName='+full.districtName+'&isVip='+full.isVip+'" style="color:#1ab394" class="eliminate">不通过</a></@shiro.hasPermission>';
return str
},
"bSortable": false,
"aTargets": [9]
}, ],
"oLanguage": { // 国际化配置
"sProcessing": "正在获取数据，请稍后...", //描述用户在输入框输入过滤条件时的动作
"sLengthMenu": "显示 _MENU_ 条", // 当使用Ajax数据源和表格在第一次被加载搜集数据的时候显示的字符串，该信息在一个空行显示
"sZeroRecords": "没有您要的内容",
"sInfo": "", //表格中没有数据是展示的表格信息 通常情况下格式会符合sinfo的格式
"sInfoEmpty": "", //当用户过滤表格中的信息的时候，该字符串会被附加到信息字符串的后面，从而给出过滤器强度的直观概念
"sInfoFiltered": "", //使用该属性可以很方便的向表格信息字符串中添加额外的信息，被添加的信息在任何时候都会被附加到表格信息组件的后面
"sInfoPostFix": "", //DataTable有内建的格式化数字的工具，可以用来格式化表格信息中较大的数字默认情况下会自动调用，可以使用该选项来自定义分割的字符
"sSearch": "搜索",
"sUrl": "",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页"
}
}
});
$("#search").on("click", function() {
table.fnDraw();//table.api().ajax.reload(); });
返回的数据格式
{
"iTotalRecords":1,
"iTotalDisplayRecords":1,
"iDisplayStart":"0",
"pageDisplayLength":"10",
"sEcho":"1",
"iSortCol_0":null,
"sSortDir_0":null,
"aaData":[
{"id":1,"gameName":"邵阳麻将","deviceTypeName":"全部","pushStatusName":"待推送","pushTime":"2017-11-08 15:16:25","pushStatus":"wait_push","operator":"","provinceCode":"430000","gameId":10001,"deviceType":"all","title":"方式是的方式","content":"二维若无热无","playerIds":"12332"}
],
"other":null,
"ssearch":null
}
可使用的dataTable
var table;
table = $("#stateList").dataTable({
"sDom": "<'top'f<'clear'>>t<'bottom'ilpr<'clear'>>",
"bProcessing": true,
"bServerSide": true,
"ordering": false,
"bFilter": false,
"bStateSave": false,
"iDisplayLength": 10,
"iDisplayStart": 0,
"dom": "Bfrtip",
"sServerMethod": "GET",
"fnServerParams": function(aoData) {
aoData.push({
"name": "provinceCode",
"value": $('.province').val()
},{
"name": "gameId",
"value": $('.game').val()
},{
"name": "status",
"value": $('.status').val()
})
},
"sAjaxSource": "${base}/msg/system/list?t=" + Math.random(),
"sScrollX": "100%",
"bScrollCollapse": true,
"fnDrawCallback": function(oSettings) {
$(function () {
$('[data-toggle="tooltip"]').tooltip();
})
$('.dele').click(function(){
var that=this;
bootbox.confirm({
buttons: {
confirm: {
label: '确认',
className: 'btn-success'
},
cancel: {
label: '取消',
className: 'btn-default'
}
},
message: '是否确认删除',
callback:function(result){
if(result){
$.ajax({
type:'get',
url:'${base}/msg/system/delete/'+$(that).attr('data-id'),
success:function(res){
if(res.meta.code==2000){
$(that).parent().parent().remove();
alert('删除成功')
}else{
alert(res.meta.message)
}
} })
}
},
title:'提示'
}) }) },
"aoColumns": [ {
"mDataProp": "contents",
"sDefaultContent": "",
"bSortable": false,
"mRender":function(data, type, full){
var str='<div style="text-align:left;">';
var contents=full.contents;
if(contents.length==1){
if(contents[0].content.length>20){
var content=contents[0].content.substr(0,20)+'...';
}else{
var content=contents[0].content;
}
str+='<p>标题：'+contents[0].title+'</p><p data-toggle="tooltip" data-placement="top" title="'+contents[0].content+'">内容：'+content+'</p></div>'
}else{
for(var i=0;i<contents.length;i++){
if(contents[i].content.length>20){
var content=contents[i].content.substr(0,20)+'...';
}else{
var content=contents[i].content;
}
str+='<p>推送文案'+(i+1)+'</p><p>标题：'+contents[i].title+'</p><p data-toggle="tooltip" data-placement="top" title="'+contents[i].content+'">内容：'+content+'</p>'
}
str+='</div>'
} return str;
},
"aTargets": [0]
}, {
"mDataProp": "pushCrowdName",
"sDefaultContent": "",
"bSortable": false,
"aTargets": [1]
}, {
"mDataProp": "deviceTypeName",
"sDefaultContent": "",
"bSortable": false,
"aTargets": [2]
},{
"mDataProp": "pushTypeName",
"sDefaultContent": "",
"bSortable": false,
"aTargets": [3]
}, {
"mDataProp": "gameName",
"sDefaultContent": "",
"bSortable": false,
"aTargets": [4]
}, {
"mDataProp": "pushTime",
"sDefaultContent": "", "bSortable": false,
"aTargets": [5]
},{
"mDataProp": "statusName",
"sDefaultContent": "",
"bSortable": false,
"aTargets": [6]
},{
"mDataProp": "operator",
"sDefaultContent": "",
"bSortable": false,
"aTargets": [7]
}, {
"mDataProp": "Operator",
"sDefaultContent": "",
"bSortable": false,
"mRender": function(data, type, full) {
var str = '';
<@shiro.hasPermission name="oop_player_sysmsg_edit">
str += '<a style="margin-left:15px;" href="${base}/msg/systemChange?id='+full.id+'&flag=1-1">修改</a>';
</@shiro.hasPermission>
<@shiro.hasPermission name="oop_player_sysmsg_del">
str += '<a class="dele" style="margin-left:15px;" data-id="'+full.id+'" href="javascript:;">删除</a>';
</@shiro.hasPermission>
return str;
},
"aTargets": [8]
}],
"oLanguage": { // 国际化配置
"sProcessing": "正在获取数据，请稍后...", //描述用户在输入框输入过滤条件时的动作
"sLengthMenu": "显示 _MENU_ 条", // 当使用Ajax数据源和表格在第一次被加载搜集数据的时候显示的字符串，该信息在一个空行显示
"sZeroRecords": "没有您要的内容",
"sInfo": "", //表格中没有数据是展示的表格信息 通常情况下格式会符合sinfo的格式
"sInfoEmpty": "", //当用户过滤表格中的信息的时候，该字符串会被附加到信息字符串的后面，从而给出过滤器强度的直观概念
"sInfoFiltered": "", //使用该属性可以很方便的向表格信息字符串中添加额外的信息，被添加的信息在任何时候都会被附加到表格信息组件的后面
"sInfoPostFix": "", //DataTable有内建的格式化数字的工具，可以用来格式化表格信息中较大的数字默认情况下会自动调用，可以使用该选项来自定义分割的字符
"sSearch": "搜索",
"sUrl": "",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页"
}
}
}); $(document).ready(function(){
$('#search').click(function(){
table.api().ajax.reload();
}) })
dataTable插件的使用的更多相关文章
- jquery.datatable插件从数据库读取数据
一.分页 分页的基本思想是根据datatable的页码及每页显示的行数,将数据从数据库分段提出,然后再填充到表格中,以达到分页的效果. 这里需要用到datatable插件的几个属性: "sE ...
- JQuery DataTable插件
参考文件: http://blog.csdn.net/xuechongyang/article/details/8424897 http://blog.csdn.net/llhwin2010/arti ...
- 分享在MVC3.0中使用jQuery DataTable 插件
前不久在网络上看见一个很不错的jQuery的DataTable表格插件.后来发现在MVC中使用该插件的文章并不多.本文将介绍在MVC3.0如何使用该插件.在介绍该插件之前先简单介绍一下,推荐该插件的原 ...
- DataTable插件通过js导出Excel
$('#myTab').DataTable( { serverSide: false,//分页,取数据等等的都放到服务端去. true为后台分页,每次点击分页时会请求后台数据,false为前台分页 d ...
- DataTable插件报错：Uncaught TypeError: Cannot read property 'style' of undefined
DataTable插件报错:Uncaught TypeError: Cannot read property 'style' of undefined 原因:table 中定义的列和aoColumns ...
- dataTable插件锁表头和锁列的教程
源代码下载 我的同事让我帮忙给弄个锁头锁列的插件.结果找到大名鼎鼎的jquery dataTable插件. 今天我们来介绍不常用的功能:dataTable插件锁表头和锁前两列 由于是移动前端.我们不考 ...
- datatable插件使用小记
经验,是前行路上,磕磕碰碰,不断探索,最终留下的结晶:亦是下一次,快速高效,寻求到结果的快捷方式. datatable插件具体可参考: 官网:http://datatables.club/ 参数说明: ...
- thinkphp5配合datatable插件分页后端处理程序
thinkphp5配合datatable插件分页后端处理程序第一版DataTable.php v.1.0 <?php use think\Db; /** * DataTable.php. */ ...
- 基于bootstrap + php +ajax datatable 插件的使用
Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 下面是我学习datatables写的一个服务器端(php)分页例子,该功能包含的功能 ...
- DataTable插件指定某列不可排序
datatable是一个jQuery扩展的表格插件.其提供了强大的表格功能. 官方地址:http://www.datatables.NET/ DataTable提供的表格样式里面,第一行都是会有排序功 ...
随机推荐
- Hi3531 SDK 安装以及升级使用说明
Hi3531 SDK 安装以及升级使用说明 第一章 Hi3531_SDK_Vx.x.x.x版本升级操作说明 如果您是首次安装本SDK,请直接参看第2章. 第二章 首次安装SDK 1.Hi ...
- Java Web项目（Extjs）报错五
1. Java Web项目(Extjs)报错五 具体报错如下: usage: java org.apache.catalina.startup.Catalina [ -config {pathname ...
- 错误代码： 1242 Subquery returns more than 1 row
1. 错误描述 1 queries executed, 0 success, 1 errors, 0 warnings 查询:SELECT t.id, DATE_FORMAT( t.statisTim ...
- USB设备驱动概述
USB设备驱动 · )USB Hub:每个USBHost控制器都会自带一个USB Hub,被称为根(Root)Hub.这个根Hub可以接子(Sub)Hub,每个Hub上挂载USB设备.一般PC有8个 ...
- Linux查看系统中的每个进程
Linux查看系统中的每个进程 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ ps -A PID TTY TIME CMD 1 ? 00:00:01 init ...
- java.sql.SQLException:ORA-01861:文字和格式字符串不匹配
1.错误描述 java.sql.SQLException:ORA-01861:文字和格式字符串不匹配 2.错误原因 字段名为statis_date在数据库中存储的数据类型是Date,而在Java中拼接 ...
- WebForm 生成并显示二维码
Generate and display QRCode in WebForm. 项目引用 QRCoder生成并显示 QRCode 项目引用 QRCoder How to use QRCoder Via ...
- 【BZOJ2186】沙拉公主的困惑（数论）
[BZOJ2186]沙拉公主的困惑(数论) 题面 BZOJ 题解 考虑答案是啥 先假设\(n=m\) 现在求的就是\(\varphi(m!)\) 但是现在\(n!\)是\(m!\)的若干倍 我们知道 ...
- 【BZOJ3262】陌上花开（CDQ分治）
[BZOJ3262]陌上花开(CDQ分治) 题解 原来放过这道题目,题面在这里 树套树的做法也请点上面 这回用CDQ分治做的 其实也很简单, 对于第一维排序之后 显然只有前面的对后面的才会产生贡献 那 ...
- PKUWC2018游记
PKUWC2018游记 Day -inf 从去年的12月底开始停课,到现在也有整整一个月的时间了. 前两周考的是OI赛制,后来就变成了IOI赛制. 整体上考的很炸,虐场的次数远少于被虐的次数. 关于去 ...