bootstrap

bootstrap——dataTable生成表格

利用dataTable自动生成表格

1：首先的得有一个载体表格(例)，引入文件

bootstrapValidator.js

bootstrap.min.js

bootstrap.min.css

<table id="table" class="table table-striped table-bordered table-hover" width="100%"></table>

2：其次就是生成那些列，以及列的条件

var columns = [
            //CONSTANT.COLUMN.CHECKALL,//生成全选按钮
            {title: "版本号", data: "version_code", defaultContent: "--",orderable: false,width:"17%"},
            {title: "版本名称", data: "version_name", defaultContent: "--",orderable: false,width:"17%"},
            {title: "是否强制升级", data: "is_force", defaultContent: "--", orderable: false,width:"17%",
                render:function (data,type,full,callback) {
                    var html = "";
                    if (data == 0) {
                        html = '否';
                    } else if (data == 1) {
                        html = '是';
                    }
                    return html;
                }
            },
            {title: "发布状态", data: "version_status", defaultContent: "--", orderable: false,width:"17%",
                render:function (data,type,full,callback) {
                    var html = "";
                    if (data == 0) {
                        html = '未发布';
                    } else if(data == 1){
                        html = '已发布';
                    }
                    return html;
                }
            },
            {title: "创建时间", data: "create_time", defaultContent: "--",orderable: false,width:"17%"},
            {
                title: "操作", data: null, orderable: false,
                render: function (data, type, full, callback) {
                    var btns="";
                    btns+= '<a class="label label-primary btn-view"  title="查看" data-open="modal" data-width="800px" data-height="500px" href="/admin/version/view?id='+full.id+'">查看</a>';
                    if (full.version_status == 1) {
                        btns+= '&nbsp;<a class="label label-danger btn-del"  title="删除" οnclick="goDelete('+full.id+')" >删除</a>';
                    }
                    return btns;
                }
            }
        ]

3：表格载体对象

var $table = $('#table');

4：表格渲染

queryForm：//搜索框

<form class="form-inline" method="post" id="queryForm" action="/admin/version/versionListData">//发起搜索的数据路径
                    <label>版本名称 :<input type="text" name="version_name" class="form-control input-sm"></label>
                    <label>版本描述:<input type="text" name="version_text" class="form-control input-sm"></label>
                    <button type="button" id="search" class="btn btn-sm btn-info"><i class="fa fa-search"></i></button>
                </form>

// 默认查询表单id为queryForm
        tables = $table.DataTable($.extend(true, {}, CONSTANT.DEFAULT_OPTION, {
            columns: columns,
            ajax: function (data, callback, settings) {
                CONSTANT.AJAX("/admin/version/versionListData", [], data, callback, settings);//数据请求路径
            },
            /*columnDefs: [
                CONSTANT.BUTTON.CHECKBOXS,
                {"width": "5%", "targets": 1} // 列宽 | className:""
            ],*/
            drawCallback: function (settings) {
                //set($table);
            }
        }));