Datatables from Sharepoint List JSON data from Rest

MichaelD · December 2015

Has anyone been successful at implementing Datatables Parent Child Rows (Expand Collapse) in a Datatables connecting via REST pulling JSON data?

ThomD · December 2015

I've used the Child Row display, but I haven't used it to display data from a parent/child relationship that references two lists in SP (yet). I'd expect that the trigger that shows the child section would need to also make a REST call to get the child list data. Then you would need to create a table with that data and insert it into the child row div.

Show some code and let's see what happens.

MichaelD · December 2015

Should I upload to Fiddler or post here on the forum?

ThomD · December 2015

Sorry man, I've been wrapped in other projects. I have your message, but please post your code here in the forum (with mark up) for posterity.

in general, I don't think you have a SP question, so much as a .child() handling question.

in the code you sent me you have this

$('#SystemRecordsTable tbody').on('click', 'td.details-control', function () {
        var table = $(this).closest('table');
        var tr = $(this).closest('tr');
        var row = table.row(tr);

     if ( row.child.isShown() ) {
            row.child.hide();
            tr.removeClass('shown');
    } else {
// Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    });//end click

the problem is your line 11

            row.child( format(row.data()) ).show();

That "format" needs to be a call to a function that builds the response HTML. I don't have a complete solution handy but this is a snippet:
My on click is (in part) this

    row.child( formatChild(row.data()) ).show();

later on have this code

function formatChild ( rowData ) {
      smallTable = "Current base: " + rowData.CurrentSalary + "  plus " + rowData.PayRaise; 
    return smallTable;
}

MichaelD · January 2016

TomD

I have a piece of code that is almost working. I think the problem is the html table because none of the data from the sharepoint list populating the table. My best guess is that the data.d.results is not being piped into a proper html table. Please see below and tell me if you see anything out of place.

<!DOCTYPE html>
<html>
<head>

href="https://sharepointonline365.sharepoint.com/sites/test/SiteAssets/css/datatables/dataTables.responsive.css"/><link rel="stylesheet" type="text/css"

href="https://sharepointonline365.sharepoint.com/sites/test/SiteAssets/css/datatables/jquery.dataTables.min.css"/>
<style>

body {
font-size: 130%;
}
table.dataTable th, table.dataTable td {
white-space: nowrap;
}
td.details-control {
background: url("/sites/test/SiteAssets/images/details_open.png") no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url("/sites/test/SiteAssets/images/details_close.png") no-repeat center center;
}
</style>
</head>

Employee Table Lookup

	Employee Id.	Division	Name	Mobile number	Home Number	Company Email	Personal Email	DOB	Emergency Contact	Emergency Phone	Permanent Address	Current Address	PAN	Image	Action
Employee Id.	Division	Name	Mobile number	Home Number	Company Email	Personal Email	DOB	Emergency Contact	Emergency Phone	Permanent Address	Current Address	PAN	Image	Action	Edit&nbspDelete
Employee Id.	Division	Name	Mobile number	Home Number	Company Email	Personal Email	DOB	Emergency Contact	Emergency Phone	Permanent Address	Current Address	PAN	Image	Action	Edit&nbspDelete

</div>

$(document).ready(function(){ updateTable(); }); function updateTable(){ var content = $.ajax({ url:"https://sharepointonline365.sharepoint.com/sites/test/_vti_bin/ListData.svc/Employees", dataType:"json", type:"GET", success : function(data) { var arr1= []; var arr= new Array(); $.each( data, function(i, obj) { arr = obj; arr1.push(arr); }); console.log(arr1[0]); $('#employeeTable').dataTable( { "aaData":arr1, "destroy":true, /*"columns": [ { "data": "employee_id" }, { "data": "division" }, { "data": "first_name" }, { "data": "mobile_number" }, { "data": "home_number" }, { "data": "company_mail" }, { "data": "personal_mail" }, { "data": "date_of_birth" }, { "data": "emergency_contact" }, { "data": "emergency_phone" }, { "data": "permanent_address" }, { "data": "current_address" }, { "data": "pancard_no" }, { "data": "" }, { "data": "" } ],*/ "aoColumns": [{ "sWidth": "5%", "mData": "employee_id" }, { "sWidth": "5%", "mData": "division" }, { "sWidth": "5%", "mData": "first_name", "mRender":function(data, type, full){ return full.first_name +" "+ full.last_name ; } }, { "sWidth": "5%", "mData": "mobile_number" }, { "sWidth": "5%", "mData": "home_number" }, { "sWidth": "5%", "mData": "company_mail" },{ "sWidth": "5%", "mData": "personal_mail" },{ "mData": "date_of_birth" }, { "sWidth": "5%", "mData": "blood_group" }, { "sWidth": "5%", "mData": "emergency_contact" }, { "sWidth": "5%", "mData": "emergency_phone" }, { "sWidth": "5%", "mData": "permanent_address" },{ "sWidth": "5%", "mData": "current_address" }, { "sWidth": "5%", "mData": "pancard_no" }, { "mData": null, "bSortable": false, "mRender": function(data, type, full) { return '

'; } }, { "mData": null, "bSortable": false, "mRender": function(data, type, full) { return 'Edit&nbspDelete'; } }], "iDeferLoading": 57 }); } }); } var oTable = $('#employeeTable').dataTable(); $('#employeeTable').on('click', 'a.delete', function(e) { e.preventDefault(); var nRow = $(this).parents('tr')[0]; var parent = $(nRow).prev(); oTable.fnDeleteRow(parent); });

</body>
</html>

Datatables from Sharepoint List JSON data from Rest

Datatables from Sharepoint List JSON data from Rest

Replies

Employee Table Lookup

Howdy, Stranger!

Categories

DataTables

Datatables from Sharepoint List JSON data from Rest

Datatables from Sharepoint List JSON data from Rest

Replies

Employee Table Lookup

Howdy, Stranger!

Quick Links

Categories

DataTables