Filtering data in one datatables by clicking another datatables

bhangorix

Hi. I'm new in this. i learned datatables by example from mbahcoding. and i m trying to expand my knowledge to parent-child datatables. i want my second datatables refresh and filtered using value from first column of my first datatables
and i've read this forums/discussion/28028. that is seem different approach with the one i am learning from. part of my datatables are look like this,

$(document).ready(function() {
 
    //datatables
    table1 = $('#table1').DataTable({ 
 
        processing: true, //Feature control the processing indicator.
        serverSide: true, //Feature control DataTables' server-side processing mode.
        order: [], //Initial no order.
 
        // Load data for the table's content from an Ajax source
        ajax: {
            url: "<?php echo site_url('apps/SECFMODULES01/ajax_list')?>",
            type: "POST"
        },
 
        //Set column definition initialisation properties.
        columnDefs: [
        { 
            targets: [ -1 ], //last column
            orderable: false, //set not orderable
        },
        ],
                select: {
                    style: "single"
                },
    }); 

    table2 = $('#table2').DataTable({ 
        processing: true, //Feature control the processing indicator.
        serverSide: true, //Feature control DataTables' server-side processing mode.
        order: [], //Initial no order.
 
        // Load data for the table's content from an Ajax source
        ajax: {
                    url: "<?php echo site_url('apps/SECFMODULES01/ajax_list_child/')?>"+table1.row( { selected: true } ).data(),
                    type: "POST",
        },
        //Set column definition initialisation properties.
        columnDefs: [
        { 
            targets: [ -1 ], //last column
            orderable: false, //set not orderable
        },
        ],
                select: {
                    style: "single"
                },

    });  
        
        table1.on( 'select', function () {
            table2.ajax.reload();       
        } );  
});

and its always show "no matchings record found". (chrome)developer tools describe the address as http://[::1]/index.php/apps/SECFMODULES01/ajax_list_child/undefined

i tried using "table1.row( { selected: true } ).data()[0]" as parameter, but it does nothing.

can anybody help me out?
sorry for my english as its not my primary language, and for my newbie question.

thanks

rf1234

Hi, I think it is very well explained in this blog post that you might not have seen yet:
https://datatables.net/blog/2016-03-25

You can build multi-level table hierarchies based on this.

bhangorix

thanks rf1234 for your quick answer. i appreciate that.
i have read that post, but it confuses my learning because it uses different approach in using datatables. maybe next time i'll learn to use that method after i'm fully understand with this one.
i just curious with this line of code

table1.row( { selected: true } ).data()

when i put it in a button action it return values as i expected. but when i use it in section of "$(document).ready(function()..." as i mention in my previous post, i get nothing.

can you(or anybody) please help me with that?

thanks

rf1234

right, you get nothing because it doesn't get triggered. If you use an event it should work.
Here is an example from my own coding:

proposalCredTable
    .on ( 'select', function () {
        proposalCredTable.rows({ selected: false }).nodes().to$().addClass('hidden');
        proposalCredTable.buttons('showAllButton:name').nodes().removeClass('hidden');
        var selected = proposalCredTable.row( {selected: true} );
        if (selected.any()) {
            $.ajax({
                type: "POST",
                url: 'actions.php?action=SetProposalId',
                async: true,
                data: {
                    proposalId: selected.data().proposal.id
                },
                dataType: "json"
            });
            showTbls(proposalFixedCredTable, proposalVariableCredTable,
                            proposalRfaCredTable);
            ajaxReloadTbls(proposalFixedCredTable, proposalVariableCredTable,
                                  proposalRfaCredTable);
        }
        if (! isApprover) {
            proposalRfaCredTable.button('2').nodes().addClass('hidden');
        }
        if (! isEditor) {
            for (i=0; i < 2; i++) {
                proposalFixedCredTable.button(i.toString()).nodes().addClass('hidden');
                proposalVariableCredTable.button(i.toString()).nodes().addClass('hidden');
            }
            for (i=0; i < 2; i++) {
                proposalRfaCredTable.button(i.toString()).nodes().addClass('hidden');
            }
        }
});

bhangorix

thanks alot rf1234 for your support. after reading your comment and sample, and... a little more digging. i found the one function that suite my need. it's ajax.url().load(). solve my problem perfectly.

here's my function to load my data with filter

function reload_menu()
{
    var selected = table1.row( {selected: true} );
    if ( selected.any() ) {
      table2.ajax.url( "<?php echo site_url('apps/SECFMODULES01/ajax_list_child/')?>"+selected.data()[0] ).load();
    }
    else
    {   
      table2.ajax.url( "<?php echo site_url('apps/SECFMODULES01/ajax_list_child')?>").load();
    }
  table2.ajax.reload(null,false); //reload datatable ajax     
}

with these i can reload my datatables data on any event.
so now i can continue my learning and improve my code.