DataTables

"columns": [
    {
        "title": "操作",
        render: function (data, type, row, full) {
            var func = [
                {
                    "name": "修改",
                    "fn": "edit(\'" + row.id + "\', table.row($(this).parent().parent()).data()  )",
                    "type": "primary"
                },
                {"name": "删除", "fn": "del(\'" + row.id + "\')", "type": "danger"}
            ]
        return generateButtonHtml(func);
    }
},
{"title": "ID", "data": "id", "class": "center"},
{"title": "文件名", "data": "fileName"},
{"title": "组织名", "data": "fileOrgName"},
{"title": "path", "data": "filePath"},
// {"title": "大小", "data": "fileSize", "class": "center"},
// {"title": "类型", "data": "fileType", "class": "center"},
// {"title": "url", "data": "fileUrl", "class": "center"},
{"title": "更新时间", "data": "updateTime", "class": "center"},
{"title": "创建时间", "data": "createTime", "class": "center"},

],

dTable.on( 'draw', function () {
    $('.paginate_button.previous').html("<<<");
    $('.paginate_button.next').html(">>>");
    var total_records = dTable.rows().count();
    var page_length = dTable.page.info().length;
    var total_pages = Math.ceil(total_records / page_length);
    var current_page = dTable.page.info().page+1;
    $('.paginate_button.previous').after("<strong>Action "+current_page+" of "+(page_length<0?1:total_pages)+"</strong>");
} );

$(document).ready(function() {
    $('#myTable').DataTable({
        "language": { //把提示信息中文化
            "lengthMenu": "显示 _MENU_ 条每页",
            "zeroRecords": "没有记录",
            "infoEmpty": "没有记录",
            "infoFiltered": "(filtered from _MAX_ total records)",
            "columns": [ //控制每一列的排序规则
                null,
                { "orderDataType": "dom-text", type: 'string' },
                { "orderDataType": "dom-text-numeric" },
                { "orderDataType": "dom-select" }
            ]
        },
        stateSave: true, //是否保存table状态
        "dom": '<"top"f>rt<"bottom"lp><"clear">',  //各个元素的位置
        "info":false,  //不显示分页详情
        "lengthMenu": [[10,15, 20,25,30,40, 50, -1], [10,15, 20,25,30,40, 50,"All"]]  //每页显示几条的选项
    } );
    var table = $('#myTable').DataTable();
$('#myTable tbody').on( 'mouseenter', 'td', function () {
        var colIdx = table.cell(this).index().column;

        $( table.cells().nodes() ).removeClass( 'highlight' );
        $( table.column( colIdx ).nodes() ).addClass( 'highlight' );
    } );

} );
/* Create an array with the values of all the input boxes in a column */

$.fn.dataTable.ext.order['dom-text'] = function  ( settings, col )

{

return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {

return $('input', td).val();

} );

};
/* Create an array with the values of all the input boxes in a column, parsed as numbers */

$.fn.dataTable.ext.order['dom-text-numeric'] = function  ( settings, col )

{

return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {

return $('input', td).val() * 1;

} );

};
/* Create an array with the values of all the select options in a column */

$.fn.dataTable.ext.order['dom-select'] = function  ( settings, col )

{

return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {

return $('select', td).val();

} );

};
/* Create an array with the values of all the checkboxes in a column */

$.fn.dataTable.ext.order['dom-checkbox'] = function  ( settings, col )

{

return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {

return $('input', td).prop('checked') ? '1' : '0';

} );

};

  var githubTable;
    $(document).ready(function () {
    //配置DataTables默认参数
    $.extend(true, $.fn.dataTable.defaults, {
        "language": {
                "processing": "处理中...",
"lengthMenu": "显示 _MENU_ 项结果",
"zeroRecords": "没有匹配结果",
"info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
"infoEmpty": "显示第 0 至 0 项结果，共 0 项",
"infoFiltered": "(由 _MAX_ 项结果过滤)",
"infoPostFix": "",
"search": "搜索:",
"searchPlaceholder": "搜索...",
"url": "",
"emptyTable": "表中数据为空",
"loadingRecords": "载入中...",
"infoThousands": ",",
"paginate": {
    "first": "首页",
    "previous": "上页",
    "next": "下页",
    "last": "末页"
},
"aria": {
    "paginate": {
        "first": "首页",
        "previous": "上页",
        "next": "下页",
        "last": "末页"
    },
    "sortAscending": "以升序排列此列",
    "sortDescending": "以降序排列此列"
},
"thousands": "."
        },
        "dom": "l<'#toolbar'>frtip"
    });

    //issue表格初始化
    githubTable = $("#issueTable").DataTable({
        //调用github api 获取issues 数据
        ajax: {
            url: "https://api.github.com/repos/ssy341/datatables-cn/issues",
            dataSrc: ""
        },
        //默认最后一列（最后更新时间）降序排列
        order: [[4, "desc"]],
        //行被创建回调
        createdRow: function (row, data, dataIndex) {
            var updated_at = new Date(Date.parse(data.updated_at)).Format("yyyy-MM-dd hh:mm:ss");
            updated_at = new Date(updated_at).getTime();
            var current = new Date().getTime();
            var bl = current - updated_at;
            var s = 5 * 24 * 60 * 60 * 1000;
            //最后更新日期在最近5天则突出显示
            if (bl < s) {
                $(row).addClass('unread');
            }
        },
        //行创建完成后回调
        rowCallback: function (row, data, index) {
            var tags = $(row).find("td:eq(1)");
            if (tags.text().indexOf("置顶") > 0) {
                var title = $(row).find("td:eq(0)");
                var hot = "<span class='hot'></span>";
                title.html(title.html() + hot);
            }
        },
        columnDefs: [
            {
                targets: 4,
                data: "updated_at",
                title: "<i class='icon-time'></i>",
                render: function (data, type, row, meta) {
                    return new Date(Date.parse(data)).Format("yyyy-MM-dd hh:mm:ss");
                }
            },
            {
                targets: 3,
                data: null,
                title: "<i class='icon-user'></i>",
                render: function (data, type, row, meta) {
                    return "<a href='" + row.user.html_url +
                        "' target='_blank'>" + row.user.login + "</a>";
                }
            },
            {
                targets: 2,
                data: "comments",
                title: "<i class='icon-comment'></i>",
                render: function (data, type, row, meta) {
                    var comments = data + "<i class='icon-comment'></i>";
                    return comments;
                }
            },
            {
                targets: 1,
                data: null,
                title: "<i class='icon-tag'></i>",
                render: function (data, type, row, meta) {
                    var labels = "";
                    if (row.labels.length) {
                        for (var j = 0, labelslen = row.labels.length; j < labelslen; j++) {
                            labels += "<span style='color:#" + row.labels[j].color + "' >" +
                                row.labels[j].name + "</span>";
                            if (j != labelslen - 1) {
                                labels += ",";
                            }
                        }
                    }
                    return labels;
                }
            },
            {
                targets: 0,
                data: "title",
                title: "<i class='icon-question-sign'></i>",
                render: function (data, type, row, meta) {
                    var title = "<a href='" + row.html_url +
                        "' target='_blank'>" + row.title + "</a>";
                    return title;
                }
            }
        ],
        initComplete: function () {
            //表格加载完毕，手动添加按钮到表格上
            $("#toolbar").css("width", "100px").css("display", "inline").css("margin-left", "10px");
            $("#toolbar").append("<a href='https://github.com/ssy341/datatables-cn/issues/new' " +
                "class='btn btn-primary btn-sm' target='_blank'>我有问题</a>");
            $("#toolbar").append("<a href='/example/diy.html' " +
                "class='btn btn-default btn-sm' style='margin-left: 5px' target='_blank'>DIY</a>");
            $("#toolbar").append("<a href='javascript:void(0);' " +
                "class='btn btn-default btn-sm closedIssue' " +
                "style='margin-left: 5px;color:#009900'>查看已解决问题</a>");
            $("#toolbar").append("<a href='javascript:void(0);' " +
                "class='btn btn-default btn-sm viewCode' style='margin-left: 5px;'>查看本实例代码</a>");

            //加载已经关闭的问题
            $(".closedIssue").clickToggle(function () {
                //调用url方法切换dt的数据源
                githubTable.ajax.url("https://api.github.com/repos/ssy341/datatables-cn/issues?state=closed").load();
                $(this).text("查看未解决问题").css("color", "#FF0000");
            }, function () {
                githubTable.ajax.url("https://api.github.com/repos/ssy341/datatables-cn/issues").load();
                $(this).text("查看已解决问题").css("color", "#009900");
            });

            //查看本例子代码
            $(".viewCode").click(function(){
                //显示模态框展示代码
                $("#issueTableCode").modal("show");
                $("#issueTableCodeContent").html($("#issueTableScript").html());
            });
        }
    });
});

//时间格式化
Date.prototype.Format = function (fmt) { //author: meizz
    var o = {
        "M+": this.getMonth() + 1,
        //月份
        "d+": this.getDate(),
        //日
        "h+": this.getHours(),
        //小时
        "m+": this.getMinutes(),
        //分
        "s+": this.getSeconds(),
        //秒
        "q+": Math.floor((this.getMonth() + 3) / 3),
        //季度
        "S": this.getMilliseconds() //毫秒
    };
    if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    }
    for (var k in o) {
        if (new RegExp("(" + k + ")").test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        }
    }
    return fmt;
};

//事件来回切换方法
//solve this
//reference http://stackoverflow.com/questions/4911577/jquery-click-toggle-between-two-functions
(function ($) {
    $.fn.clickToggle = function (func1, func2) {
        var funcs = [func1, func2];
        this.data('toggleclicked', 0);
        this.click(function () {
            var data = $(this).data();
            var tc = data.toggleclicked;
            $.proxy(funcs[tc], this)();
            data.toggleclicked = (tc + 1) % 2;
        });
        return this;
    };
}(jQuery));

$(document).ready(function() {

table=$('#myTable').DataTable({

"language": { //把提示信息中文化

"processing": "处理中...",

"lengthMenu": "每页显示 MENU 条数据",

"zeroRecords": "没有匹配结果",

"infoFiltered": "(由 MAX 项结果过滤)",

"infoPostFix": "",

"search": "搜索:",

"searchPlaceholder": "搜索...",

"url": "",

"emptyTable": "表中数据为空",

"loadingRecords": "载入中...",

"infoThousands": ",",

"paginate": {

"previous": "上一页",

"next": "下一页",

},

"aria": {

"paginate": {

"previous": "上一页",

"next": "下一页",

},

"sortAscending": "以升序排列此列",

"sortDescending": "以降序排列此列"

},

"columns": [ //控制每一列的排序规则

null,

{"orderDataType": "dom-text", type: 'string'},

{"orderDataType": "dom-text-numeric"},

{"orderDataType": "dom-select"}

]

},

stateSave: true, //是否保存table状态

"dom": '<"top"f<"toolbar">>rt<"bottom"lp><"clear">',  //各个元素的位置，插入一个class="toolbar"的div然后在下面往里添加元素

"info": false,  //不显示分页详情

"lengthMenu": [[10, 15, 20, 25, 30, 40, 50, -1], [10, 15, 20, 25, 30, 40, 50, "All"]],  //每页显示几条的选项

initComplete: function () {

//表格加载完毕，手动添加按钮到表格上

$(".toolbar").css("width", "82px").css("display", "inline").css("float", "right")

.append("<button type='button' class='btn btn-primary' data-toggle='modal' data-target='#modal-add' data-type='random'>添加学校</button>");

}

});
$('#myTable tbody').on('mouseenter', 'td', function () {
    var colIdx = table.cell(this).index().column;

    $(table.cells().nodes()).removeClass('highlight');
    $(table.column(colIdx).nodes()).addClass('highlight');
});

});