Fatal编程技术网
  • javascript/
  • Javascript 如何在页面上的两个数据表之间切换？

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

javascript jquery sharepoint datatables

Javascript 如何在页面上的两个数据表之间切换？,javascript,jquery,sharepoint,datatables,Javascript,Jquery,Sharepoint,Datatables,我有两个SharePont列表，需要使用在页面上呈现数据。我还有两个单选按钮，每个按钮代表一个不同的datatable，它将被呈现到同一个页面。当我单击其中一个时，它应该在页面上呈现关联的datatable，并能够在两个表之间来回切换。我能够成功地让表格显示，并且能够切换。我遇到的问题是，每次切换时，我的标题都会被渲染相同的次数。请参见下面的示例 在我的代码中，我认为我可以通过使用remove（）方法从DOM中删除节点来解决这个问题，但由于其他代码依赖于删除的节点，因此这会产生后果 以下是HT

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

在我的代码中，我认为我可以通过使用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");
}

函数ajaxCall（listName）{
如果（listName.value===‘大审核’）{
if（document.getElementById（“smallReport_包装”）！==null）{
document.getElementById（“smallReport\u包装器”）.style.display=“无”
}
document.getElementById（“bigReport”）.style.display=“block”；
document.getElementById（“smallReport”）.style.display=“无”；
}否则{
document.getElementById（“smallReport”）.style.display=“block”；
if（document.getElementById（“bigReport\u包装”）！==null）{
document.getElementById（“bigReport\u包装器”）.style.display=“无”
//document.getElementById（“bigReport”）.remove（）；
}
document.getElementById（“bigReport”）.style.display=“无”；
}
$.ajax({
url:_spPageContextInfo.webAbsoluteUrl+“/_api/web/lists/getbytitle（“+listName.value+”）/items”，
键入：“获取”，
标题：{
“接受”：“application/json；odata=verbose”
},
成功：做点什么，
错误：dosomethingelse
  })    
}
功能剂量测量（数据）{
警报（“数据中”）；
var radioValue=“”；
if（document.querySelector（“#bigdaudits”）。选中）{
radioValue=“bigReport”
}否则{
警报（无线电值）；
radioValue=“smallReport”
}
数据=数据d.结果；
var html=“”；
$.each（数据、函数（索引、值）{
//控制台日志（索引+“-”+值）；
html+=“”；
html+=“”；
html+=“”+value.reportNum+“”；
html+=“”+value.OOO+“”；
html+=“”+value.RRR+“”；
html+=“”+value.Subject+“”；
html+=“”+value.big_代码+“”；
html+=“”+value.StartDate+“”；
html+=“”+value.modifydate+“”；
html+=“”+value.modifydate+“”；
html+=“”；
})
$（'#'+radioValue+'tbody'）.append（html）；
//设置-向每个页脚单元格添加文本输入
$（'#'+radioValue+'thead tr'）.clone（true）.appendTo（'#'+radioValue+'thead'）；
$（“#”+radioValue+“thead tr:eq（1）th'）。每个（函数（i）{
var title=$（this.text（）；
如果（i==0）{//不需要“编辑”列的文本框
$（this.html（“”）；
}其他{
$（this.html（“”）；
        }
        
 
$（'input'，this）.on（'keyup change'，函数（）{
if（table.column（i）.search（）！==this.value）{
桌子
.第（i）栏
.search（this.value）
.draw（）；
            }
        } );
    } );
 
变量表=$（'#'+radioValue）。数据表（{
是的，
fixedHeader:true，
毁灭：真的
    } );
}
函数dosomethingelse（）{
警报（“错误”）；
控制台日志（“dosomethingelse”）；
}
在此方面的任何帮助都将不胜感激。我已经为此挣扎了一段时间。

为什么它总是有重复的标题是由以下代码引起的：

每次单击都将复制现有标题。你也可以参考一下

BR

对迟来的回复表示歉意。代码运行得很好。除了这一部分，我知道你做了什么if（typeof table！=“undefined”）{table.clear（）；table.destroy（）；}``table从哪里来？