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’. ListThese 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! scDataTable

 

Source Code

No Comments

Leave a Comment: