11
Answers

How to get 15000 items from SP list and bind to Jquery table

pradeep m

pradeep m
6y
4.3k
1
How to get more than 5000 items from SharePoint List and bind to the Jquery database.
 
Please find the below code what i written and also i added all JS files(jquery.1.12.min.js,Jquery.DataTable.js, and Jquery.Datatable.css)
 
I don't understand where i did the mistake i always getting error like DataTable is not a funtion.
 
Can Anyone please help me on this ASAP.
 
Thanks in advance....
  1. </head>  
  2. <Title>  
  3. Threshold more than 5000 items  
  4. </Title>  
  5. <div>  
  6. <table id="CustomerGrid" class="display" cellspacing="0" width="100%">  
  7. <thead>  
  8. <tr>  
  9. <th>ID</th>  
  10. <th>Title</th>  
  11. <th>Requestor</th>  
  12. <th>Company</th>  
  13. </tr>  
  14. </thead>  
  15. </table>  
  16. </div>  
  17. </body>  
  18. <script>  
  19. var web;  
  20. var spItems;  
  21. var position;  
  22. var nextPagingInfo;  
  23. var previousPagingInfo;  
  24. //listName = 'Claims',  
  25. var pageIndex = 5; // default page index value  
  26. var pageSize = 300; // default page size value  
  27. var Olist;  
  28. var clientcontext;  
  29. var camlQuery;  
  30. var tableContent='';  
  31. var items = [];  
  32. // This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model  
  33. $(document).ready(function() {  
  34. clientcontext = new SP.ClientContext.get_current();  
  35. oList = clientcontext.get_web().get_lists().getByTitle("Claims");  
  36. camlQuery = new SP.CamlQuery();  
  37. GetListItems();  
  38. // var rowCount = $('#CustomerGrid tr').length;  
  39. // console.log(rowCount);  
  40. });  
  41. function GetListItems() {  
  42. //Set the next or back list items collection position  
  43. //First time the position will be null  
  44. camlQuery.set_listItemCollectionPosition(position);  
  45. // Create a CAML view that retrieves all contacts items with assigne RowLimit value to the query  
  46. camlQuery.set_viewXml("<View>" +  
  47. "<ViewFields>" +  
  48. "<FieldRef Name='Title'/>" +  
  49. "<FieldRef Name='Requestor'/>" +  
  50. "<FieldRef Name='Company'/>" +  
  51. "</ViewFields>" +  
  52. "<RowLimit>" + pageSize + "</RowLimit></View>");  
  53. spItems = oList.getItems(camlQuery);  
  54. clientcontext.load(spItems);  
  55. clientcontext.executeQueryAsync(Function.createDelegate(this,this.onSuccess),Function.createDelegate(this,this.onfail));  
  56. }  
  57. // This function is executed if the above OM call is successful  
  58. // This function render the returns items to html table  
  59. function onSuccess() {  
  60. var listEnumerator = spItems.getEnumerator();  
  61. var item;  
  62. while (listEnumerator.moveNext()) {  
  63. item = listEnumerator.get_current();  
  64. items.push(item.get_fieldValues());  
  65. //items.push(item.get_item);  
  66. }  
  67. console.log(items);  
  68. try{  
  69. //table.rows.add($(tableHTML)).draw(); //Append each list row to data tabel  
  70. $('#CustomerGrid').DataTable({  
  71. "aaData": items,  
  72. "scrollY":"600px",  
  73. "scrollCollapse": true,  
  74. "paging": false,  
  75. "aoColumns":  
  76. [  
  77. {  
  78. "ID":"ID"  
  79. },  
  80. {  
  81. "mData": "Title",  
  82. "render": function(mData,type, full) {  
  83. return '<a href="'+mData+'">' + mData + '</a>';  
  84. }  
  85. },  
  86. {  
  87. "mData": "Requestor"  
  88. },  
  89. {  
  90. "mData": "Company"  
  91. }  
  92. ]  
  93. });  
  94. }  
  95. catch (e) {  
  96. alert(e.message);  
  97. }  
  98. //return tableContent;  
  99. managePagerControl();  
  100. }  
  101. function onfail(sender, args)  
  102. {  
  103. alert("fetching failed due to : "+args.get_message());  
  104. }  
  105. </script>
Answers (11)
Next Recommended Forum