jquery.dataTable和jquery.DataTable初始化

最新推荐文章于 2025-05-08 12:20:08 发布

原创最新推荐文章于 2025-05-08 12:20:08 发布 · 379 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

本文探讨了使用DataTable()与dataTable()函数初始化数据表格的区别，详细解释了如何利用.row(tr)函数与.api()方法对数据表格进行操作，包括刷新、清空及格式化数据。

两者均能对dataTable进行初始化，DataTable() 没有.fnDraw(false)函数，dataTable()没有.row(tr)函数。

function fnClickReload() {
    if (typeof (tblList) != "undefined") {
        tblList.fnDraw(false);
        editRow();
    }
}

如果dataTable()要使用.row(tr)函数，使用.api()

var tr = $(this).closest('tr');
var row = tblList.api().row(tr);

例如：

var tblList;
function getList() {

    if (typeof (tblList) != "undefined") {
        tblList.fnClearTable(false);
        tblList.fnDestroy();
    }

    tblList = $("#tblList").dataTable({
columns: [
            {
                orderable: false,
                defaultContent: "",
                className: 'details-control',
                data: 'MessageId'
            }],
        fnCreatedRow: function (nRow, aData, iDataIndex) {
            $('td:eq(0)', nRow).html("<b>+</b>");
        }
    });

    editRow();
}

function editRow() {
    $('#tblList tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = tblList.api().row(tr);

        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
            tr.children("td").eq(0).html("<b>+</b>");
        }
        else {
            // Open this row
            row.child(format(row.data())).show();
            tr.addClass('shown');
            tr.children("td").eq(0).html("<b>-</b>");
        }
    });
}

function format(row) {
    return "<div style=\"padding-left:50px;\"><b>标题：</b>" + row.Subject +" <b>内容：</b>"+ row.Body+"</div>";
}

<table class="table table-striped table-bordered table-hover " id="tblList">
                        <thead>
                            <tr>
                                <th></th>
                                <th>发送机构</th>
                                <th>提醒类别</th>
                                <th>提醒时间</th>
                                <th>提醒范围</th>
                                <th>提醒机构</th>
                                @*<th>提醒标题</th>
                                <th>提醒内容</th>*@
                                <th>状态</th>
                                <th>创建者</th>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <th></th>
                                <th>发送机构</th>
                                <th>提醒类别</th>
                                <th>提醒时间</th>
                                <th>提醒范围</th>
                                <th>提醒机构</th>
                                @*<th>提醒标题</th>
                                <th>提醒内容</th>*@
                                <th>状态</th>
                                <th>创建者</th>
                            </tr>
                        </tfoot>
                    </table>