数据表工作不正常。 $(...).DataTable 不是函数答案

【问题标题】：Data table is not working properly. $(...).DataTable is not a function数据表工作不正常。 $(...).DataTable 不是函数
【发布时间】：2019-06-19 23:15:09
【问题描述】：

我正在从 SharePoint 列表中提取一些数据并将数据插入到数据表中，但出现错误。数据被正确提取，但功能不起作用。我对 webpart 进行了编码，它本身运行良好，但是当我将 webpart 插入共享点布局时，出现了错误。

我已经添加了 jQuery $.noConflict();代码，因为我读到可能有 2 个 jQuery 调用，这将解决它。不工作。我知道母版页是一个 jQuery 调用，但是当我在 webpart 上删除调用时它会中断。我还尝试更改脚本的顺序，但没有解决问题。

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>

我希望该功能能够像在表格内搜索和显示分页一样工作。

【问题讨论】：

您的脚本非常混乱，首先，确定真正需要哪些 jQuery 插件来使用 DataTable 并查看 F12。
我完全不确定 SharePoint Server 2013 是否支持插件 jquery-3.4.0.min.js，替换为 jquery-2.1.3.min.js（推荐）或版本不高于 3.0.0。
@fox 我在其他网站上使用它
在您的代码中，不清楚您要在 DataTable 中显示什么？？？如果你想建一个有列的表，你需要使用“aaData”：data.d.results”。
还有一些我想说的：a) 您当然应该不自己编写 DataTable 的 HTML； b) 你不需要需要使用 jQuery $.ajax() 方法来填充 DataTables（然后处理所有异步混乱），你最好使用 DataTables ajax 选项。

标签： jquery datatables sharepoint-2013

【解决方案1】：

例如，如何在 SharePoint 中使用 DataTable：

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

结果：

【讨论】：

嗨@fox 我正在尝试你的代码，但它仍然给我一个错误，不在控制台上，但警报说 $(...).DataTable 不是一个函数。 <table id="dtBasicExample" class="table table-striped table-bordered table-sm" cellspacing="0" width="100%"> <thead> <tr> <th>Title</th> <th>Description</th> </tr> </thead></table>
$(document).ready(function() { loadItems();}); function loadItems() { var siteUrl = _spPageContextInfo.siteAbsoluteUrl; var oDataUrl = siteUrl + "/cyberSecurity/_api/web/lists/getbytitle('cyberFeed')/items?$select=Title,Description"; $.ajax({ url: oDataUrl, type: "GET", dataType: "json", headers: { "accept": "application/json;odata=verbose" }, success: mySuccHandler, error: myErrHandler }); }
function mySuccHandler(data) { try { $('#dtBasicExample').DataTable({ "aaData": data.d.results, "aoColumns": [ { "mData": "Title" }, { "mData": "Description" } ] }); } catch (e) { alert(e.message); } } function myErrHandler(data, errMessage) { alert("Error: " + errMessage); }