Список SharePoint: функция загрузки данных с данными не отображается - PullRequest
Новая
       5

Список SharePoint: функция загрузки данных с данными не отображается

0 голосов
/ 04 августа 2020

У меня есть списки SharePoint, которые отображаются на странице путем переключения. Он создается в доступной для поиска и сортировки таблице с использованием dataTables. В обеих таблицах возвращаемые данные загружаются немного медленно, поэтому я хотел бы добавить на экран сообщение о том, что страница все еще загружается. Я узнал о datatable [language.loadingRecords] [1], но по какой-то странной причине у меня это не работает. Я пробовал с processing:true и без него, но это не сработало. Есть идеи, что я делаю не так? Спасибо! 

    <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>




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,
    'processing':true,
    'language': {
        'processing':'Data being loaded. Please wait...'
    }
    } );
}

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


  [1]: https://datatables.net/reference/option/language.loadingRecords
...