data in one table based on which row is selected in second table

emann3

I have two tables: Accounts and Transactions.

When the user changes the selected Account in the 1st table, I want to reload the second table passing a different variable in the ajax call (data in both tables is loaded by ajax).

    $(document).ready(function () {
        var account_table = $("#AccountsTable").DataTable({
            paging: false,
            searching: false,
            info: false,
            ajax: {
                url: '/?handler=Accounts',
                datasrc: ''
            },
            columns: [
                { data: 'id', visible: false },
                { data: 'name', defaultContent: '', orderable: false },
                { data: 'transactions.current_balance', defaultContent: '', orderable: false, render: $.fn.dataTable.render.number(',', '.', 2, '$'), className: 'dt-body-right' }
                //{ data: 'has_new', defaultContent: '', orderable: false },
                //{ data: 'balance_error', defaultContent: '', orderable: false }
            ],
            select: 'single'
        });

        $("#TransactionsTable").DataTable({
            paging: false,
            searching: false,
            info: false,
            ajax: {
                url: '/?handler=Transactions',
                datasrc: '',
                data: 3  **//currently fixed value, this needs to be based on selected row in Accounts Table**
            },
            columns: [
                { data: 'id', visible: false },
                {
                    data: 'transaction_date',
                    defaultContent: '',
                    orderable: false,
                    render: function (data, type, row) {
                        var dateSplit = data.split('T');
                        var date = dateSplit[0].split('-');
                        return date[1] + '/' + date[2] + '/' + date[0];
                    }
                },
                { data: 'check_number', defaultContent: '', orderable: false },
                { data: 'user_description', defaultContent: '', orderable: false },
                { data: 'memo', defaultContent: '', orderable: false },
                { data: 'category', defaultContent: '', orderable: false },
                { data: 'deposit', defaultContent: '', orderable: false, render: $.fn.dataTable.render.number(',', '.', 2, '$'), className: 'dt-body-right' },
                { data: 'payment', defaultContent: '', orderable: false, render: $.fn.dataTable.render.number(',', '.', 2, '$'), className: 'dt-body-right' },
                { data: 'balance', defaultContent: '', orderable: false, render: $.fn.dataTable.render.number(',', '.', 2, '$'), className: 'dt-body-right' }
            ],
            select: 'single'
        });
    });

kthorngren

This blog should get you started.
https://datatables.net/blog/2016-03-25

If you aren't using Editor then you can ignore that part of the config.

Kevin

emann3

wow, thats great, thanks very much Kevin.

That made it very easy to do.