datatables 常用的操作、复杂表头

一.设置细节

1.选中状态

①选中一条：

 var tableSelects= $("#tbMain table").DataTable().row('.selected').data();

②选中所有数据

 var tableSelects= $("#tbMain table").DataTable().rows('.selected').data();

2.显示  复选框

  option.body.datatables.checkColumn = true;

3.显示 点击选中

  tableOption.select = true;

4.不要用ctrl控制多选行

    //显示  复选框
    option.body.datatables.checkColumn = true;
    // tableOption.select = true; //这个要注释 而不是 为false

5.刷新表格数据---reload

  $('#tbMain  table').DataTable().ajax.reload( null, false );

6.给表增加新的字段--columnDefs

 
//禁止第一列参与搜索
$('#example').dataTable( {
  "columnDefs": [ {
		"targets": 0,
		"searchable": false
    } ]
} );
 
//增加操作按钮
$('#example').dataTable( {
  "columnDefs": [ {
	"targets" : 5,//操作按钮目标列
	"data" : null,
	"render" : function(data, type,row) {
	var id = '"' + row.id + '"';
	html = "编辑";
	html += "删除";
		return html;
	}
    } ]
} );

7.自增序号

        { 
            data: null, 
            title: "序号",
            render:function(data,type,row,meta) {
                return meta.row + 1 +meta.settings._iDisplayStart;
            }
        },

 

 

二.小实例

1.传递数据源----要转换成json格式

tableOption.ajax = {
type: "POST",
url:ylzBizID.getBgxmzdDataListPFByYqdhOrYqmc(),
data: oDatas
};

 

var oData = $("#tbMain form").serializeArray();
//将jquery.serializeArray()得到的数组转为键值对形式的json
var helper = new ylzFormHelper("#tbMain");
oDatas = helper.mapToModel(oData);
tableOption.ajax = {
	type: "POST",
	url:ylzBizID.getBgxmzdDataListPFByYqdhOrYqmc(),
	data: oDatas
};
// 把数据传给表格
var ylzTable = new ylzDatatable("#tbMain .box-body");
ylzTable.createPaginationDatatables(tableOption);

 

2. 初始化（默认）设置 datatables的行样式

2.1默认选中行数  

 

 tableOption 就是DataTbales 的参数对象
tableOption.fnRowCallback=function( raw, aData, iDisplayIndex, iDisplayIndexFull ){                    
                    if(aData.isChecked){
                        $("#tbMain table").DataTable().rows(raw).select();
                        $(raw).find("input[name='cbkSelectRow']").prop("checked", true);                           
                    }
                }

 

 

 

 

2.2 封装的当datatables 的每一个行创建节点成功以及事件渲染成功后触发
 row : 渲染的行 data ： 当前行的数据

 

function fnRowCallback(row,data){
    //获取警戒值的 td框
    var td =  $(row).find('td').eq(3);
    //如果是超出警戒值H ，设为红色;低于警戒值L，设为蓝
    if(data.jgzcbz=="H"){
      td.css('color','red');
    }else if(data.jgzcbz=="L"){ 
        td.css('color','blue');
    }
    //如果是超警戒值， 那么背景色为黄色
    if(data.sfcjjz == '1'){
        $(row).css('background','yellow');                    
    }
}

 

3.整个操作

//初始化Table
function TableInit(table,url,data) {
    $(table).dataTable({
        ajax: {
            // method: "POST",
            url: url,
            dataSrc: 'data',//通过 Ajax，从一个文件获取 JSON 数据，使用 dataSrc属性把 data改为 tableData （比如： { tableData: [ ...data... ] } ）
            data:data // 查询条件
        },
        autoWidth: false,//自适应列宽
        lengthChange: true,
        paging: true,
        scrollCollapse: true,
        serverSide: false,
        search: false,
        select:true,
        processing: true,
        scrollX: "100%",
        scrollXInner: "100%",
        scrollCollapse: true,
        jQueryUI: false,
        autoSearch: false,
        searching: false,
        ordering: false,//禁止排序
        language: {
            "sProcessing": "处理中...",
            "sLengthMenu": "每页 _MENU_ 条记录",
            "sZeroRecords": "没有匹配结果",
            "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 条记录",
            "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
            "sInfoPostFix": "",
            "sSearch": "搜索:",
            "sUrl": "",
            "sEmptyTable": "未搜索到数据",
            "sLoadingRecords": "载入中...",
            "sInfoThousands": ",",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "<",
                "sNext": ">",
                "sLast": "末页"
            },
        },
        columns: [
            {   
                "data": "id",
                "title":"id",
                "visible":false //列表隐藏
            },
            { 
                "data": "hisTime" ,
                "title":"发生时间"
            },
            { 
                "data": "brxm00",
                "title":"姓名" 
            },
            { 
                "data": "brnl00",
                "title":"年龄" 
            },
            { 
                "data": "lxdh00",
                "title":"联系电话" 
            },
            {
                "targets":-1,
                "data": null,
                "title":"操作", 
                "render" : function(data, type,row) {
                    var id = '"' + row.id + '"';
                    var html = "查看详情";
                    return html;
                }
            }
            
        ]
		
	});
}
function detailsBtn(id) {
    console.log('点击')
    $('#detailsContaine').load('templates/mzjl/modules/details.html');
    $(".tableList").css('display','none');
}

4、复杂表头

   

		

			
病人基本信息
			
操作
		
		

			
id
			
姓名
			
年龄
			
发生时间
			
电话
		
	
	

	

TableInit("#comTable","static/jsonData/mzjlData.json",'');
//初始化Table   data 是传参数
function TableInit(table,url,data) {
    $(table).dataTable().fnClearTable();
    var thead = ''
        +''
            +'病人基本信息'
            +'项目'
        +''
        +''
            +'姓名'
            +'年龄'
            +'发生时间'
            +'电话'
            +'操作'
        +''
    +'';
    $.ajax({
        url:url,
        dataType: 'json',
        type:'GET',
        success:function(res) {
            var data = res.data;
            if (!data) {
                return;
            }
            var dtime = null,len = data.length,trTpl="";

            for(var i in data){
                var brxm00 = data[i].brxm00 ? data[i].brxm00 : '';
                var brnl00 = data[i].brnl00 ? data[i].brnl00 : '';
                var hisTime = data[i].hisTime ? data[i].hisTime : '';
                var lxdh00 = data[i].lxdh00 ? data[i].lxdh00 : '--';

                trTpl += "" +
                    "" + data[i].id+ "" +
                    "" + brxm00 + "" +
                    "" + brnl00 + "" +
                    "" + hisTime + "" +
                    "" +lxdh00 + "" +
                    "查看" +
                    "";
            }

            $(table).html(thead + ''+ trTpl +'');
            $(table).dataTable({
                autoWidth: true,//自适应列宽
                lengthChange: true,//是否允许用户改变表格每页显示的记录数
                paging: true,
                serverSide: false,//是否开启服务器模式
                search: false,
                select:true,
                filter:true,
                displayLength:10,
                processing: false,//是否显示处理状态
                searching: false,
                sort:false,
                destroy:true,
                ordering: false,//禁止排序
                language: {
                    "sProcessing": "处理中...",
                    "sLengthMenu": "每页 _MENU_ 条记录",
                    "sZeroRecords": "没有匹配结果",
                    "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 条记录",
                    "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                    "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                    "sInfoPostFix": "",
                    "sSearch": "搜索:",
                    "sUrl": "",
                    "sEmptyTable": "未搜索到数据",
                    "sLoadingRecords": "载入中...",
                    "sInfoThousands": ",",
                    "oPaginate": {
                        "sFirst": "首页",
                        "sPrevious": "上一页",
                        "sNext": "下一页",
                        "sLast": "末页"
                    },
                },
                columns: [
                    {width: "10%","visible":false},
                    {width: "10%"},
                    {width: "10%"},
                    {width: "10%"},
                    {width: "10%"},
                    {width: "10%"}
                ]
        		
        	});
            $("#comTable_length").css('left',($("#comTable_info").width() + 20)+'px');
        }

    })
}
//跳转 详情页
function detailsBtn(id) {
    $('#detailsContainer').load('templates/mzjl/modules/details.html');
    $("#mainPage").css('display','none');
}

mzjlData.json 数据
{
    "data": [{
        "id": 0,
        "brnl00": "70岁",
        "hisTime": "20190218 15:36:11",
        "lxdh00": "17720937609",
        "brxm00": "林元捷"
    }, {
        "id": 1,
        "brnl00": "23岁",
        "hisTime": "20190219 15:36:11",
        "lxdh00": "13620937609",
        "brxm00": "张晓松"
    }]
}