Таблица данных не работает должным образом.$ (...). DataTable не является функцией

Question

Я извлекаю некоторые данные из списка SharePoint и вставляю их в таблицы данных, но появляется ошибка. Данные извлекаются правильно, но функциональность не работает. Я закодировал веб-часть, и она работала нормально сама по себе, но когда я вставил веб-часть в макет sharepoint, возникает ошибка.

Я добавил jQuery $ .noConflict (); код, потому что я прочитал, может быть 2 вызова jQuery, и это будет исправить. Не работал. Я знаю, что главная страница имеет вызов jQuery, но когда я удаляю вызов из веб-части, он прерывается. Я также пытался изменить порядок сценариев, но не решил проблему.

f1 = $.ajax({
    url: "/cyberSecurity/_api/web/lists/GetByTitle('cyberFeed')/items",
    method: 'GET',
    headers: {
        'Accept': 'application/json; odata=verbose'
    },
    success: function(data) {
        var items = data.d.results;
        console.log(items);

        var cyberFeed = $('#cyberFeed');
        var feedContent;

        for (var i = 0; i < items.length; i++) {
            feedContent = '<tr style="background-color: #003967; color: white;">' + '<th>' +'<h6 class="h6-responsive" style="padding-left: 5px; padding-top: 5px;margin-bottom: 4px;  ">' +items[i].Title + '</h6>'+ '</th>' + '</tr>' +
                '<td style="background-color: white; padding-left: 19px; padding-top:10px;">' + items[i].Description + '</td>';
            cyberFeed.append(feedContent);
        }
    },

    error: function(data) {
        console.log('Error: ' + data);
    }


}); // End Service Icons  //End Service Icons

f1.done(function() {
$.noConflict();
    $('#dtBasicExample').DataTable({
        "pagingType": "numbers", // "simple" option for 'Previous' and 'Next' buttons only
        "ordering": false,

    });
    $('.dataTables_length').addClass('bs-select');
}

<script type="text/javascript" src="/Style%20Library/V7/js/vendor/mdb_update/js/jquery-3.4.0.min.js"></script>
    <script type="text/javascript" src="/Style%20Library/V7/js/vendor/mdb_update/js/popper.min.js"></script>
    <script type="text/javascript" src="/Style%20Library/V7/js/vendor/mdb_update/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/Style%20Library/V7/js/vendor/mdb_update/js/mdb-iefix.js"></script>
    <script type="text/javascript" src="/_catalogs/masterpage/V6/js/vendor/datatables.min.js"></script>
    <script type="text/javascript" src="/_catalogs/masterpage/V6/js/vendor/datatables-select.min.js"></script>

Я ожидаю, что функциональность будет работать, как возможность поиска внутри таблицы и отображение нумерации страниц.

Answer 1

Пример использования DataTable в SharePoint:

 $(document).ready(function() {    
        loadItems();    
    });    
        
      
    function loadItems() {    
        var siteUrl = _spPageContextInfo.siteAbsoluteUrl;    
        var oDataUrl = siteUrl + "/_api/web/lists/getbytitle('EmployeeInfo')/items?$select=Title,Position,Office,Age,Joining_x0020_date";    
        $.ajax({    
            url: oDataUrl,    
            type: "GET",    
            dataType: "json",    
            headers: {    
                "accept": "application/json;odata=verbose"    
            },    
            success: mySuccHandler,    
            error: myErrHandler    
        });    
    }    
      
    function mySuccHandler(data) {    
        try {    
              
            $('#table_id').DataTable({    
                  
                "aaData": data.d.results,    
                "aoColumns": [  
                {    
                    "mData": "Title"    
                },   
                {    
                    "mData": "Position"    
                },   
                {    
                    "mData": "Office"    
                },   
                {    
                    "mData": "Age"    
                },  
                {    
                    "mData": "Joining_x0020_date"    
                }             
                ]    
            });    
        } catch (e) {    
            alert(e.message);    
        }    
    }    
        
    function myErrHandler(data, errMessage) {    
        alert("Error: " + errMessage);    
    }   

 <!DOCTYPE html>    
    <html>    
    <head>    
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>        
        <script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>     
          
        <script type="text/javascript" src="/SiteAssets/GetData.js"></script>    
        <!--External js file to get data from SharePoint List -->   
          
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">    
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/dataTables.jqueryui.min.css">      
    </head>    
    <body>    
       <div>    
        <table id="table_id" class="display" cellspacing="0" width="100%">    
            <thead>    
                <tr>    
                    <th>Name</th>    
                    <th>Position</th>    
                    <th>Office</th>    
                    <th>Age</th>    
                    <th>Joining Date</th>            
                </tr>    
            </thead>    
            <tfoot>  
                <tr>    
                    <th>Name</th>    
                    <th>Position</th>    
                    <th>Office</th>    
                    <th>Age</th>    
                    <th>Joining Date</th>                   
                </tr>   
            </tfoot>    
        </table>    
        </div>    
    </body>    
    </html>    

Результат: