Как включить Показывать записи с помощью столбцов фильтра с помощью вызова AAPA-вызова из списка Sharepoint с помощью jquerydataTable?

Question

Я хочу показать все получение данных в sharepointsite страница. Итак, Я использовал jquery dataTable для извлечения данных из списка sharepoint, чтобы показать текущую html-страницу. Html кодматериалы, используемые в Sharepoint ContentEditor, а также 'код сценария' используется в ScriptEditor на Sharepoint страницу сайта.
Но я не могу показать Показать записи и Фильтровать содержание. Я не могу включить эти функции 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> 

Я хочу отобразить извлечение данных в jQuery DataTable с показами записей и содержимым столбцаFilter. теперь я могу получить данные из списка sharepoint, чтобы успешно показывать текущую страницу сайта.

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

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'); 
    } 
}); 

В качестве альтернативы, вы можете использовать $.ajax вне инициализации DataTables, как вы делаете сейчас, в этом случае вы должны использовать row.add() метод для добавления строк в таблицу или использовать data свойство для определения массива данных холдинга.

Обратите внимание, что ваш <table> должен иметь правильную структуру. Ниже приводится выдержка из manual:

Для DataTables, чтобы иметь возможность улучшить таблицу HTML, таблица должна быть действительно, хорошо отформатирован HTML, с заголовком (thead) и тела (tbody).