Create A Custom Data Table in SharePoint 2013 using Rest, Knockout and DataTables.net

Create A Custom Data Table in SharePoint 2013 using Rest, Knockout and DataTables.net

Create A Custom Data Table in SharePoint 2013

DataTables.net offers highly flexible data table solutions. By leveraging SharePoint Rest Services, Knockout, and DataTables.net, we can create a better experience for users. This is what the data table view looks like ‘out of the box’. These work great to display data but is not as easily customized as we would like. To create our own data table, we need to leverage SharePoint Rest Services to get the list data returned via json.

 this.loadEmployees = function () { var listUrl = "../_api/web/lists/getbytitle('DataTables%20Example')/items"; $.ajax( { url: listUrl, method: "GET", headers: { "accept": "application/json;odata=verbose" }, success: function (data) { ko.applyBindings({ rows : data.d.results }); } }); } 

On the success function, we pass the results from our Rest call to Knockout.

 success: function (data) { ko.applyBindings({ rows : data.d.results }); } 

Next, we use Knockout to build our table.

<table id="scDataTable" class="table table-striped table-bordered bootstrap-datatable datatable">
 <thead>
  <tr>
   <th>Name</th>
   <th>Position</th>
   <th>Office</th>
   <th>Age</th>
   <th>Start Date</th>
   <th>Salary</th>
  </tr>
 </thead>
 <tfoot>
  <tr>
   <th>Name</th>
   <th>Position</th>
   <th>Office</th>
   <th>Age</th>
   <th>Start Date</th>
   <th>Salary</th>
  </tr>
 </tfoot>
 <tbody data-bind="foreach: rows">
  <tr>
   <td data-bind="text: Title"></td>
   <td data-bind="text: Position"></td>
   <td data-bind="text: Office"></td>
   <td data-bind="text: Age"></td>
   <td data-bind="spDate: StartDate,dataFormat:'DD-MMM-YYYY'"></td>
   <td data-bind="money: Salary"></td>
  </tr>
 </tbody>
</table>

Finally, initialize the data table and we’re done! We use Bootstrap for the data table UI.

 jQuery('#scDataTable').DataTable(); 

That was easy!

 

Source Code