如何使用带有jquerydataTable的Sharepointlist中的RestAPI Ajax调用启用带有过滤列的显示条目？

Question

我想将所有检索数据显示在 sharepointsite页面中。以便，     我曾使用jquery dataTable从sharepoint列表中检索数据以显示当前的html页面。 sharepoint ContentEditor 中使用的内容代码以及 sharepoint网站页面的ScriptEditor中使用的＆＃39;脚本代码＆＃39; < / strong>即可。
    但我无法显示显示条目内容和过滤内容。我无法启用 jqueryDataTable 的这些功能。     任何人都可以帮助我..？

**ContentEditor** 

Html content is,

<div class="container">
    <table id="demoexample"></table>
</div>


**ScriptEditor**

Script code is,


<style type = "text/css">
.container {

}
</style>

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src = "https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css"></script>
<script>
    $(document).ready(function () {

        setTimeout(function () { retrieveListItems(); }, 2000);


    });

    var SPListData="";
    var Botanic = [];
    var BotanicAll = [];
                /* Some script code*/

        function retrieveListItems() 
            {
                //console.log("I am in retrieveListItems() ");
                var collListItem = "";
                //var clientContext = new SP.ClientContext('http://www.vignesh.cloudappsportal.com');
                getListItem('siteUrl', 'Catalogue', 'field1','field2','field3',.....,'onQuerySucceeded', 'onQueryFailed');
            }


        function getListItem(url, listname, field1,field2,field3,....., complete, failure) 
            {


                // Getting our list items
                $.ajax({
                    url: url + "/_api/lists/getbytitle('"+ listname +"')/items",
                    method: "GET",
                    headers: { "Accept": "application/json; odata=verbose" },
                    success: function (data) 
                    {

                        SPListData=data;


                        for (emp = 0; emp < SPListData.d.results.length; emp++) 
                            {

                                Botanic.push(new BotanicalDetails(SPListData.d.results[emp].ContentTypeId,SPListData.d.results[emp].field1,SPListData.d.results[emp].field2,SPListData.d.results[emp].field3,SPListData.d.results[emp].field4,........));


                            }


                      //Data from an Array


                        $("#demoexample").dataTable({
                          "pagingType": "full_numbers",


                            "bPaginate": false,
                            "bLengthChange": false,
                            "bFilter": true,
                            "bInfo": false,
                            "bAutoWidth": false ,

                            "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],


                           "aaData":"currentListName",
                           "bJQueryUI": true,
                           "aoColumns": [{
                            "sTitle": "Field1",
                            "sWidth": "200px"
                          },{
                            "sTitle":"Field2",
                            "sWidth": "200px"
                          },{
                            "sTitle":"Field3",
                            "sWidth": "200px"
                          },{
                            "sTitle":"Field4",
                            "sWidth": "200px"
                          }]
                        });



                    },
                    error: function (data) 
                        {
                        //console.log("I am in error block of ajax call");
                            failure(data);
                        }
                });
            };

        function onQuerySucceeded(_parameter) 
            {
                //console.log("I am in onQuerySucceeded()");
                SPListItems.push(_parameter);
            }

        function onQueryFailed(faildata) 
            {
                //console.log("I am in onQueryFailed()");
                alert('fail');
            }
        function complete(data) 
            {
                //console.log("I am in complete");
                SPListItems.push(_parameter);

            };
        function failure(data) 
            {
                alert("S");
            };
        function Get2DisplayItems()
            {
                for(var z=0;z<=Botanic.length;z++)
                    {
                        //console.log("Now Botanic[z] value is : ",Botanic[z]);
                    }
            };




</script>

我想显示使用show entries和columnFilter内容将数据检索到jQuery DataTable中。现在，我可以从sharepointlist中检索数据，以便成功显示当前网站页面。

请有人建议我如何启用显示条目内容和列过滤器。

Answer 1

初始化DataTables的简单方法如下所示。请注意，您需要调整columns属性和<table>以匹配您要显示的列数：

下面显示的代码没有单独的$.ajax调用，因为DataTables会为您发出Ajax请求。

$('#example').DataTable({
    "paging": false,
    "lengthChange": false,
    "searching": true,
    "info": false,
    "autoWidth": false,
    "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
    "jQueryUI": true,
    "ajax": {
        url: "/test/0",
        dataSrc: "d.results"
    },
    "columns": [
        { "data" : "ContentTypeId", "width": "200px" },
        { "data" : "field1", "width": "200px" },
        { "data" : "field2", "width": "200px" }
    ]
});

请参阅this JSFiddle进行演示。

如果您希望将数据存储用于显示数据以外的目的，则可以使用xhr event。

$('#example').on('xhr.dt', function ( e, settings, json, xhr ) {
   // console.log("Response", json);
   if(json){
      for (emp = 0; emp < json.d.results.length; emp++){
         // console.log("Row", json.d.results[emp]);
      }
   } else {
      // console.log('Request faield');
   }
});

或者，您可以像现在一样在DataTables初始化之外使用$.ajax，在这种情况下，您需要使用row.add()方法向表中添加行或使用data用于指定数组保存数据的属性。

另请注意，您的<table>必须具有正确的结构。以下是manual：

的摘录

  

要使DataTable能够增强HTML表，该表必须是   有效且格式良好的HTML，带有标题（thead）和正文（tbody）。