dataTable实现会议预定

1.页面结构

<table class="table table-striped table-bordered table-hover dataTable no-footer dt-responsive" id="data-table-actmReserve">
    <thead>
        <tr role="row" class="heading">
            <th class=""> 名称 </th>
            <th class=""> 最多容纳人数 </th>
            <th class="" id="place"> 位置 </th>
            <th class=""> &nbsp;&nbsp;&nbsp;7点 </th>
            <th class=""> &nbsp;&nbsp;&nbsp;8点 </th>
            <th class=""> &nbsp;&nbsp;&nbsp;9点 </th>
            <th class=""> 10点 </th>
            <th class=""> 11点 </th>
            <th class=""> 12点 </th>
            <th class=""> 13点 </th>
            <th class=""> 14点 </th>
            <th class=""> 15点 </th>
            <th class=""> 16点 </th>
            <th class=""> 17点 </th>
            <th class=""> 18点 </th>
            <th class=""> 19点 </th>
            <th class=""> 20点 </th>
            <th class=""> 21点 </th>
            <th class=""> 22点 </th>
            <th width="10%" id="oper"> 操作 </th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

2.js代码

var renderDiv = function (data, type, row, meta) {
    var col = meta.col; //列
   
    var tMap = {};
    for(var i = 0; i < row.list.length; i++){
        var reserveType = row.list[i].reservetype;
        var oneTimeStart = row.list[i].starttime;//开始时间
        var oneTimeEnd = row.list[i].endtime; //结束时间
        var t1 = moment(oneTimeStart);
        var t2 = moment(oneTimeEnd);
        tMap[t1.hour() + "-" + t1.minute()] = reserveType;
        while(t1.add(30,'m').isBefore(t2)){
           tMap[t1.hour() + "-" + t1.minute()] = reserveType;
        }
    }
    var h = col + 4;
    var type1 = tMap[h + "-0"];
    var type2 = tMap[h + "-30"];
    //如果type1存在，在当前cell画左半侧
    //如果type2存在，在当前cell画右半侧
    var leftArea = '',
        rightArea = '';
    if(type1==='一次性预定'){
        leftArea = '<span data-time = "' + h + ':00" class="pull-left one-time-half-left"></span>';
    }else if(type1==='周期性预定'){
        leftArea = '<span data-time = "' + h + ':00" class="pull-left cycle-half-left"></span>';
    }
    if(type2==='一次性预定'){
        rightArea = '<span data-time = "' + h + ':30" class="pull-right one-time-half-right"></span>';
    }else if(type2==='周期性预定'){
        rightArea = '<span data-time = "' + h + ':30" class="pull-right cycle-half-right"></span>';
    }
 
    return leftArea + rightArea;
};
return {
    init: function () {
        var grid = new Datatable();
        grid.init({
            src: $("#data-table-actmReserve"),
            dataTable: {
                order:[[20,"asc"]],
                "ajax": {
                    "url": ...,
                    type: 'GET',
                    "dataType": 'json'
                },
                responsive: false,
                autoWidth: true,
                "columns": [
                    {
                        data:'name',
                        render: function(data, type, row){
                         ...
                            return data;
                        }
                    },
                    {
                        data:'count'
                    },
                    {
                        data:'place'
                    },
                    {
                        data: '7点',
                        orderable:false,
                        render: renderDiv
                    },
                    {
                        data: '8点',
                        orderable:false,
                        render: renderDiv
                    },
                    {
                        data: '9点',
                        orderable:false,
                        render: renderDiv
                    },
                    {
                        data: '10点',
                        orderable:false,
                        render: renderDiv
                    },
                    {
                        data: '11点',
                        orderable:false,
                        render: renderDiv
                    },
                    {
                        data: '12点',
                        orderable:false,
                        render: renderDiv
                    },
                    {
                        data: '13点',
                        orderable:false,
                        render: renderDiv
                    },
                    {
                        data: '14点',
                        orderable:false,
                        render: renderDiv
                    },
                    {
                        data: '15点',
                        orderable:false,
                        render: renderDiv
                    },
                    {
                        data: '16点',
                        orderable:false,
                        render: renderDiv
                    },
                    {
                        data: '17点',
                        orderable:false,
                        render: renderDiv
                    },
                    {
                        data: '18点',
                        orderable:false,
                        render: renderDiv
                    },
                    {
                        data: '19点',
                        orderable:false,
                        render: renderDiv
                    },
                    {
                        data: '20点',
                        orderable:false,
                        render: renderDiv
                    },
                    {
                        data: '21点',
                        orderable:false,
                        render: renderDiv
                    },
                    {
                        data: '22点',
                        orderable:false,
                        render: renderDiv
                    },
                    {
                        data: function ( row, type, val, meta ) {
                            var reserve = '预定'
                            return reserve;
                        },
                        orderable:false
                    },
                    {data:'createdDate',visible:false}
                ]
            }
        });
  
    }
}