datatables 常用的操作、复杂表头

Bertha 。 2021-09-14 11:26 1199阅读 0赞

一.设置细节

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 = "<button class='edit-btn btn btn-primary btn-flat' type='button'>编辑</button>";
    	html += "<button class='edit-btn btn btn-primary btn-flat' type='button'>删除</button>";
    		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);                           
                        }
                    }

![20171215092941409][]

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

![20171215093055054][]

3.整个操作

<table id="comTable" class="display"></table>
    //初始化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 = "<a href='javascript:void(0);'  class=''  onclick='detailsBtn("+ id + ")'>查看详情</a>";
                        return html;
                    }
                }
                
            ]
    		
    	});
    }
    function detailsBtn(id) {
        console.log('点击')
        $('#detailsContaine').load('templates/mzjl/modules/details.html');
        $(".tableList").css('display','none');
    }

4、**复杂表头**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70][]

<table id="comTable" class="display comTable" width="100%">
       <thead>
    		<tr>
    			<th colspan="5">病人基本信息</th>
    			<th rowspan="2">操作</th>
    		</tr>
    		<tr>
    			<th>id</th>
    			<th>姓名</th>
    			<th>年龄</th>
    			<th>发生时间</th>
    			<th>电话</th>
    		</tr>
    	</thead>
    	<tbody>
    	</tbody>
    </table>
    TableInit("#comTable","static/jsonData/mzjlData.json",'');
    //初始化Table   data 是传参数
    function TableInit(table,url,data) {
        $(table).dataTable().fnClearTable();
        var thead = '<thead>'
            +'<tr>'
                +'<th colspan="4">病人基本信息</th>'
                +'<th>项目</th>'
            +'</tr>'
            +'<tr>'
                +'<th>姓名</th>'
                +'<th>年龄</th>'
                +'<th>发生时间</th>'
                +'<th>电话</th>'
                +'<th>操作</th>'
            +'</tr>'
        +'</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 += "<tr role='row'>" +
                        "<td>" + data[i].id+ "</td>" +
                        "<td>" + brxm00 + "</td>" +
                        "<td>" + brnl00 + "</td>" +
                        "<td>" + hisTime + "</td>" +
                        "<td>" +lxdh00 + "</td>" +
                        "<td><a href='javascript:void(0);' style='color: #00c25e;'  onclick='detailsBtn("+ data[i].id + ")'>查看</a></td>" +
                        "</tr>";
                }
    
                $(table).html(thead + '<tbody>'+ trTpl +'</tbody>');
                $(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": "张晓松"
        }]
    }

[20171215092941409]: /images/20210813/4d3de3247c60441b9bbd650cf3a68ab8.png
[20171215093055054]: /images/20210813/b541bd5c3fb7475996bb805cc2300556.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70]: /images/20210813/8de2452c77e34b588a8d89fb843a414b.png