datatables 带参数查询与完成后的回调处理

原创
2014/04/01 14:38
阅读数 1.6K

datatables 带参数查询

var table = $('#datatables');//表格对象
 //datatables
table.dataTable( {
  "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
  "sPaginationType": "bootstrap",
  "oLanguage": {
		  "sLengthMenu": "每页显示  _MENU_ 条记录",  
		  "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
		  "oPaginate": {
			  "sFirst": "首页",
			  "sPrevious": "前一页",
			  "sNext": "后一页",
			  "sLast": "尾页"
			  },
		  "sZeroRecords": "抱歉, 没有找到",
		  "sInfoEmpty": "没有数据"
		},
 "bProcessing": true,
 "bServerSide": true,
 "sAjaxSource": "/user/list",
 "bFilter": true, 
								 
  "aoColumnDefs": [{
				  "aTargets": [3],
				  "mData": null,
				  "bSortable": false,
				  "bSearchable": false,
				  "mRender": function (data, type, full) {
					  if(full[3] == 1){
						 return "使用中"  
					  }else if(full[3] == 0){
						 return "禁用" 
					  }
				  }
			  },{
				  "aTargets": [4],
				  "mData": null,
				  "bSortable": false,
				  "bSearchable": false,
				  "mRender": function (data, type, full) {
					  if(full[4] == 2){
						 return "管理员"  
					  }else if(full[4] == 1){
						 return "用户" 
					  }
				  }
			  },{
				  "aTargets": [5],
				  "mData": null,
				  "bSortable": false,
				  "bSearchable": false,
				  "mRender": function (data, type, full) {
					  return '<a data-toggle="modal" data-target="#myModal"  data-title="' + full[0] + '"  class="btn btn-info" href="#"><i class="icon-edit icon-white"></i>修改</a>' +'&nbsp;&nbsp;';
				  }
			  }]

});

//动态的点击事件来查询
//带参数查询
$('.icon-external-link').click(function () {
	//以下为查询时候动态添加查询参数方法
	var oSettings = table.fnSettings();
	oSettings.aoServerParams.push({
		"fn": function (aoData) {
			aoData.push({
			"name": "thisisok",
			"value": "这是我传递的参数的内容说"
			});
		}
	});
	table.fnDraw();
});

第二种

$('#example').dataTable( {
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "scripts/server_processing.php",
    "fnServerParams": function ( aoData ) {
      aoData.push( { "name": "more_data", "value": "my_value" } );
    }
});


完成操作后的回调(发现很适合搞一些总计之类的处理)


"fnDrawCallback":function(obj){
     console.log(obj.aoData[0]._aData);
}

完成渲染后给每行最后一个td加个caozuo的class,以后事件中使用

"fnDrawCallback":function(obj){
    $.each(obj.aoData,function(k,v){
       $(v.nTr).find('td:last').addClass('caozuo');
    });
}






展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
3 收藏
0
分享
返回顶部
顶部