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