Parent / Child editing

RichJCG

I have implemented a parent / child scenario based on this https://datatables.net/blog/2016-03-25

It's working as expected except for when I click from row to row. At times it does not render at all, yet the data has been returned when I check the response from server.

Realizing the blog above was posted several years ago - maybe there are some updates that could make this more reliable?

kthorngren

I use that example for a couple of my pages and I don't have issues. I can go from row to row and the child table updates correctly. WE would probably need to see your code. Can you provide a link to your page or a test case?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

RichJCG

Currently hosted on my local computer. It's a fairly complex setup (or I think so anyway) with codeigniter, foundation, and datatables.

I'll see if I can get something setup on live.datatables that resembles what it is.

kthorngren

Maybe you can just start with the relevant JS code and an example of what is returned for the child row.

I would look for any other functions that you aren't expecting to run that might clear the table. Maybe something is causing the parent row to be deslected and executing this code from the example:

siteTable.on( 'deselect', function () {
    usersTable.ajax.reload();
} );

Kevin

RichJCG

projectTable.on( 'select', function () {
staffTable.ajax.reload();
 staffeditor
  .field( 'projects_staff.pid' )
  .def( projectTable.row( { selected: true } ).data().projects.pid );
} );
 
projectTable.on( 'deselect', function () {
staffTable.ajax.reload();
} );

Similar to what original codes was - except I have to go one level deeper to get the id.

On select I get the following data for the staffTable and it loads

{"data":[{"DT_RowId":"row_133","projects_staff":{"ps_id":"133","user_id":"133","startdate":"2018-03-05","enddate":"2019-08-15","pid":"440"},"employee":{"fname":"Adam","lname":"lastname"},"users":{"username":"AdamB"},"position":{"position":"Project Manager"},"projects":{"pname":"The Springs"}},...

On deselect or selecting another row I get this

{"data":[]}

If it's another row I get two calls - one clearing the table and one with the same as initial select above. It typically goes several times just fine, and then doesn't load the data, although I still get the proper data returned in the response.

This was what was returned on the 4th reload but didn't load.

{"data":[{"DT_RowId":"row_147","projects_staff":{"ps_id":"147","user_id":"122","startdate":"2018-10-01","enddate":"2020-07-15","pid":"527"},"employee":{"fname":"Chance ","lname":"lastname "},"users":{"username":"ChanceW"},"position":{"position":"Project Engineer"},"projects":{"pname":"Residence Hall"}},...

When this happens the staffTable says "No Matching Records Found", which is also what is shown when nothing in the projectTable is selected. If it doesn't have data it says "No data available for this table".

Again - this is more of an annoyance than anything. Concern that users will not see data and will start adding more.

kthorngren

This was what was returned on the 4th reload but didn't load. When this happens the staffTable says "No Matching Records Found", which is also what is shown when nothing in the projectTable is selected.

The "No Matching Records Found" indicates to me that you have some sort of search applied to the child table. Does the child table info show something like this:
Showing 0 to 0 of 0 entries (filtered from 1 total entries)

EDIT: In my case when no data is retrieved for the child table I see "No data available in table".

Kevin

RichJCG

When it hangs up it shows
"Showing 0 to 0 of 0 entries (filtered from NaN total entries)". Again - when looking at response from server it does show the data just doesn't render.

When no data the child table shows the same as you show.

This is the child table config

var staffTable = $('#staff').DataTable({
        //processing: true,
        serverSide: true,
        //deferLoading: true,
        dom: 'Br<t>i',
        ajax: {
            url: '".site_url()."ajax/staff',
            type: 'POST',
            data: function (d) {
                var selected = projectTable.row({ selected: true } );

                if (selected.any() ) {
                d.pid = selected.data().projects.pid;

            }
        }
        },
        rowId: 'projects_staff.ps_id',
        columns: [
        {data: 'users.username', editField: 'projects_staff.user_id'},
        {data: 'position.position'},
        {data: 'projects_staff.startdate', className: 'editable'},
        {data: 'projects_staff.enddate', className: 'editable'},
        {data: 'projects.pname', editField: 'project_staff.pid'}
        ],
        select: {style: 'single'},
        buttons:[
        { extend: 'create', editor: staffeditor },
        { extend: 'edit',   editor: staffeditor },
        { extend: 'remove', editor: staffeditor },
        ]

        });

kthorngren

You have serverSide: true, set for your child table. Is your server script setup for server side processing? Maybe thats why you are getting the NaN in the filtered from NaN total entries.

Definitely looks like you have some sort of search applied to that table. Do you have any custom search functions or APIs configured?

Kevin

RichJCG

Missed that - certainly not something I need for that table. I have it setup for serverside on the main table and had copied the basic config over.

Seriously... kicking myself for not seeing that.

Thank you so much for that and for taking the time.