Question

我正在从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>

我希望该功能能够正常工作，例如能够在表格内进行搜索并显示分页。

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

结果：

数据表无法正常工作。 $（...）。DataTable不是函数

1 个答案: