如何在页面上的两个数据表之间切换？

Question

我有两个 SharePont 列表，需要使用 datatables 在页面上呈现数据。我还有两个单选按钮，每个按钮代表一个将呈现到同一页面的不同数据表。当我单击其中一个时，它应该在页面上呈现关联的数据表，并能够在两个表之间来回切换。我能够成功地显示表格并且能够切换。我遇到的问题是每次切换时，我的 header 都会被渲染多次。请参阅下面的示例

在我的代码中，我认为我可以通过使用 remove() 方法从 DOM 中删除节点来解决问题，但由于其他代码依赖于删除的节点，这会产生其自身的后果。

这是HTML：

    <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/fixedheader/3.1.7/js/dataTables.fixedHeader.min.js"></script>
    
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.7/css/fixedHeader.dataTables.min.css" />
</head>

<body>
    <div>Choose report</div>
    <div style="margin-bottom:25px">
        big Audits: <input type="radio" id="bigAudits" name="Audits" value="big Audits" onclick="ajaxCall(this)" /><br />
        small Audits: <input type="radio" id="smallAudits" name="Audits" value="small Audits" onclick="ajaxCall(this)" />
    </div>
    
    <table id="bigReport" class="display" style="width:100%;display:none" border="0">
        <thead>
            <tr>
                <th>Edit</th>
                <th>Report #</th>
                <th>OOO</th>
                <th>RRR</th>
                <th>Subject</th>
                <th>big Code</th>
                <th>Start Date</th>
                <th>Modify Date</th>
                <th>Close Date</th>
            </tr>
        </thead>
        <tbody>
        
        </tbody>
    </table>

    <table id="smallReport" class="display" style="width:100%;display:none" border="0">
        <thead>
            <tr>
                <th>Edit</th>
                <th>Report #</th>
                <th>OOO</th>
                <th>RRR</th>
                <th>Subject</th>
                <th>big Code</th>
                <th>Start Date</th>
                <th>Modify Date</th>
                <th>Close Date</th>
            </tr>
        </thead>
        <tbody>
        
        </tbody>
    </table>

这是javaScript：

function ajaxCall(listName){
    if (listName.value === 'big Audits'){
        if (document.getElementById("smallReport_wrapper") !== null){
            document.getElementById("smallReport_wrapper").style.display = "none"
        }
        document.getElementById("bigReport").style.display = "block";
        document.getElementById("smallReport").style.display = "none";
    }else{
        
        document.getElementById("smallReport").style.display = "block";
        if (document.getElementById("bigReport_wrapper") !== null){
            document.getElementById("bigReport_wrapper").style.display = "none"
            //document.getElementById("bigReport").remove();
        }
        document.getElementById("bigReport").style.display = "none";
    }
    
  $.ajax({
    url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('"+ listName.value + "')/items",
    type: "GET",
    headers: {
        "Accept":"application/json;odata=verbose"   
    },
    success:dosomething,
    error:dosomethingelse
  })    

}

function dosomething(data){
alert("in data");
    var radioValue = "";
    
    if (document.querySelector("#bigAudits").checked){
        radioValue = "bigReport"
    }else{
        alert(radioValue);
        radioValue = "smallReport" 
    }

    data = data.d.results;
    var html = "";
    $.each(data, function(index, value){
    //console.log(index+"-"+value);
        html += "<tr>";
            html += "<td size='10'><a href='edit.aspx?id=" + value.ID + "'>edit</a></td>";
            html += "<td>" + value.reportNum + "</td>";
            html += "<td>" + value.OOO + "</td>";
            html += "<td>" + value.RRR + "</td>";
            html += "<td>" + value.Subject + "</td>";
            html += "<td>" + value.big_code + "</td>";
            html += "<td>" + value.StartDate + "</td>";
            html += "<td>" + value.modifydate + "</td>";
            html += "<td>" + value.modifydate + "</td>";
        html +="</tr>";
    })
    $('#'+radioValue+'  tbody').append(html);
    
        // Setup - add a text input to each footer cell
    $('#'+radioValue+'  thead tr').clone(true).appendTo( '#'+radioValue+' thead' );
    $('#'+radioValue+' thead tr:eq(1) th').each( function (i) {
        var title = $(this).text();
        if (i===0){ //don't need the textbox for the 'Edit' column
            $(this).html( ' ' );
        }else{
            $(this).html( '<input type="text" size="10" style="background-color:#eeeeee" placeholder="Search '+title+'" />' );
        }
        
 
        $( 'input', this ).on( 'keyup change', function () {
            if ( table.column(i).search() !== this.value ) {
                table
                    .column(i)
                    .search( this.value )
                    .draw();
            }
        } );
    } );
 
    var table = $('#'+radioValue).DataTable( {
        orderCellsTop: true,
        fixedHeader: true,
        destroy:true
    } );
}

function dosomethingelse(){
alert("error");
 console.log("dosomethingelse");
}

如有任何帮助，我们将不胜感激。我已经为此苦苦挣扎了一段时间。

Answer 1

之所以总是重复headers是因为下面的代码：

每次点击都会复制现有 headers。你也可以参考这个 code.

BR

如何在页面上的两个数据表之间切换？

How can I toggle between two DataTables on a page?

javascript

sharepoint

jquery

datatables