datatables 常用的操作、复杂表头

最新推荐文章于 2024-09-07 09:17:16 发布

面条请不要欺负汉堡

最新推荐文章于 2024-09-07 09:17:16 发布

阅读量5.8k

点赞数

分类专栏： bootstrap+dataTables+layui 文章标签： datatables 常用的操作复杂表头

本文链接：https://blog.csdn.net/gao_xu_520/article/details/78742306

版权

bootstrap+dataTables+layui 专栏收录该内容

13 篇文章 2 订阅

订阅专栏

一.设置细节

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);                           
                    }
                }

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 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、复杂表头


<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": "张晓松"
    }]
}