zoukankan      html  css  js  c++  java
  • jquery.dataTable和jquery.DataTable初始化

    两者均能对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>
  • 相关阅读:
    python3 5个带key内置函数
    python3常用内置函数总结
    python入门基础-函数装饰器的理解
    python入门基础-三元表达式、命名空间、作用域、函数名本质、闭包
    python入门基础-初识函数
    第二章001编写脚本
    Appium 自动化测试第一天——基础知识
    python基础-读取文件
    linux6.4 安装python3 pip setuptools
    selenium+python之HTML测试报告
  • 原文地址:https://www.cnblogs.com/hofmann/p/12846163.html
Copyright © 2011-2022 走看看