datatable服务器分页 设置单元格的css样式、展示的值、设置单元格点击事件

服务器分页 如何设置单元格的css样式、展示的值、设置单元格点击事件呢

多说无益，上代码

var dtable=$('#tableid').DataTable({
		 "bSort":true,//是否启动各个字段的排序功能
		 "aLengthMenu": [
		                     [10, 15, 20,-1],
		                     [ 10, 15, 20, "All"] 
		                ],
		 "order": [],//去掉第一列排序图标
		 "aoColumnDefs": [
		                     { "bSortable": false, "aTargets": [0] }
		                 ],
		 "scrollCollapse": "true",
		 "paging": "false",
		 "iDisplayLength":20,
		 "sDom": 'lfB<"toolbar">rtip',
		 "bFilter" : true,
		 "bPaginate":true,
		 "destroy":true,
		 "bAutoWidth": false,//自动宽度
		 "bScrollCollapse": true,
		 "oLanguage": {
		     "sLengthMenu": "每页显示 _MENU_ 条",
		     "sInfo":"共 _TOTAL_ 条，显示 _START_ 到 _END_ 条",
		     "sEmptyTable": "无数据项",
		     "sInfoFiltered": "(从 _MAX_ 条中筛选)",
		     "sSearch": "搜索:",
		     "sInfoEmpty": "没有数据",
		     "sZeroRecords":"没有符合条件的数据",
		     "oPaginate": {
		         "sPrevious": "上一页",
		         "sNext": "下一页"
		     }
		 },
		 buttons: [],
		 "serverSide":true, //是否开启服务器模式
		 "deferRender":true, //控制Datatables的延迟渲染，可以提高初始化的速度
		 ajax : function(data, callback, settings)
		 {
		     $.ajax({
		        // .....
		     });
		 }, // ajax
		 "columns":// 得到后台JSON数据包后，设置参数data中的的数据在表格中显示
		 [
		     {"data": "addr",
		     	"className": "dataTabCursor",
		         render : function(data, type, row, meta)
		         {
		             var addr = row.addr;
		             if (addr == "" || addr == null)
		             {
		                 return "-";
		             }
		             return addr;
		         },
		         createdCell : function(nTd, sData, oData, iRow, iCol)
		         {
		             $(nTd).click(
		                 function ()
		                 {
		                     if (sData == "-")
		                     {
		                         return;
		                     }
		                     linkAndCommunicationHis(sData);
		                 }
		             );
		         }
		     }
		 ]
		}); // dtable

• 设置当前单元格的css样式，使用 “className”: "dataTabCursor"

  dataTabCursor是 class的名称 将单元格的字体调整为20px;

	.dataTabCursor
	{
		  font-size: 20px;
	}

• 单元格展示的值

	render : function(data, type, row, meta)
	{
	    var addr = row.addr;
	    if (addr == "" || addr == null)
	    {
	        return "-";
	    }
	    return addr;
	}

row中存放的是 当前行 的所有字段数据 (可以打断点看一下参数)
判断addr  如果是空的话,单元格中展示为 -   如果不是空，则将addr的值显示在单元格中

• 设置单元格点击事件 createdCell

	createdCell : function(nTd, sData, oData, iRow, iCol)
	{
	    $(nTd).click(
	        function ()
	        {
	            if (sData == "-")
	            {
	                return;
	            }
	            // 调用方法
	            clickFunction(sData);
	        }
	    );
	}

$(nTd).click()   单击事件
$(nTd).dblclick()   双击事件   其他事件自行百度


参数:
 nTd：目标单元格dom 元素
 sData：当前单元格返回的data，也就是上面的 addr
 oData：当前行的数据
 iRow：当前行index
 iCol：当前列index

有关于datatable的问题，欢迎私信哦~