项目总结 Datatable

html中表格代码

<table id="website-selection"  width="100%">
    <thead>
        <tr>
        <th>编号</th>
        <th>网站名称</th>
        <th>网站分类</th>
        <th>创建日期</th>
        <th>创建者</th>
        <th>状态</th>
            <th>最后操作日期</th>
        <th>最后操作者</th>
        <th>操作</th>
        </tr>
    </thead>
        <tbody>                             
        </tbody>
</table>

js代码

$(window).on('load', function() {
    
    //$('#start').val('2031-01-01T00:00:01');
    // DATA TABLES
    // =================================================================
    // Require Data Tables
    // -----------------------------------------------------------------
    // http://www.datatables.net/
    // =================================================================

    $.fn.DataTable.ext.pager.numbers_length = 5;
    function add0(m){return m<10?'0'+m:m }
        //website-selection为table表名
    var rowSelection = $('#website-selection').DataTable({
        /*"responsive": true,
        "language": {
            "paginate": {
              "previous": '<i class="fa fa-angle-left"></i>',
              "next": '<i class="fa fa-angle-right"></i>'
            }
        },*/
        "bFilter":false,
        "bLengthChange":false,
        "serverSide": true,
        "ajax":{
            "url": "/getWebsiteListData",
            "type": "post",
                      //若想刷新表格 则需要在请求url时传入不同参数
            "data": function ( parms ) {
                parms.filtercreatetimestart = $('[name="filtercreatetimestart"]').val();
                parms.filtercreatetimeend = $('[name="filtercreatetimeend"]').val();
            },
            "dataType": "json",
            "dataSrc":function(json){
                return json.datas;
            }
        },
        "columns": [
            { "data": "websiteId" },
            { "data": "websiteName" },
            { "data": "websiteType",
            
                "orderable":false,
                "render": function ( data, type, full ) {  
                    var status;
                    if(data=="dianshang") {
                        status = "电商数据";
                    } else if(data=="qiye") {
                        status = "企业数据";
                    } else{
                        status = "未知"
                    }
                    return "<td>"+status+"</td>";}
            }, 
           //不格式化 数据库Datetime显示在表格上是时间戳 
            { "data": "createTime",
            
                "render": function ( createtime, type, full ) { 
                    var time = new Date(createtime);
                    var y = time.getFullYear();
                    var m = time.getMonth()+1;
                    var d = time.getDate();
                    var h = time.getHours();
                    var mm = time.getMinutes();
                    var s = time.getSeconds();
                    //console.log("<td>"+y+'-'+add0(m)+'-'+add0(d)+' '+add0(h)+':'+add0(mm)+':'+add0(s)+"</td>");
                    return "<td>"+y+'-'+add0(m)+'-'+add0(d)+' '+add0(h)+':'+add0(mm)+':'+add0(s)+"</td>";}
            },
        //每列内容栏添加按钮
            { "defaultContent": "<button type='button'>字段</button><button type='button'>约束</button><button  data-toggle='modal' data-target='#alterRole' type='button'>编辑</button><button type='button'>删除</button>"}     ]});
//search为id的搜索按钮 点击后重新获得数据并刷新表格
    $('#search').on("click",function(){
        rowSelection.ajax.reload();
    })
    $('#website-selection').on( 'click', 'tr', function () {
        if ( $(this).hasClass('selected') ) {
            $(this).removeClass('selected');
        }
        else {
            rowSelection.$('tr.selected').removeClass('selected');
            $(this).addClass('selected');
        }
    } );
    
    

页面图

image.png

点击按钮时，获得当前行的数据（公司内部框架适用）

//获取当前行上的某个值
var websiteId = gridFun.oTable.row($(this).parents("tr")).data().websiteId;
//获取当前行上的select元素的值
var webroleType = $(this).parents("tr").find("select").val()
//点击编辑按钮时 函数传递 当前行元素
var editBtn = "<a onclick='"+"editFuc("+JSON.stringify(meta)+")"+"'>编辑</a>";