Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how can I trigger jquery datatables fnServerData to update a table via AJAX when I click a button?

I'm using the datatables plugin with server-side data and am updating the table using AJAX.

My dataTables setup looks like this:

tblOrders = parameters.table.dataTable( {
    "sDom": '<"S"f>t<"E"lp>',
    "sAjaxSource": "../file.cfc",
    "bServerSide": true,
    "sPaginationType": "full_numbers",  
    "bPaginate": true,
    "bRetrieve": true,
    "bLengthChange": false,         
    "bAutoWidth": false,
    "aaSorting": [[ 10, "desc" ]],      
    "aoColumns": [                      
        ... columns 
                  ],
    "fnInitComplete": function(oSettings, json) {
        // trying to listen for updates
        $(window).on('repaint_orders', function(){
            $('.tbl_orders').fnServerData( sSource, aoData, fnCallback, oSettings );
            });
        },
    "fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
        var page = $(oSettings.nTable).closest('div:jqmData(wrapper="true")')
        aoData.push(
            { "name": "returnformat", "value": "plain"},
            { "name": "s_status", "value": page.find('input[name="s_status"]').val() },
            { "name": "s_bestellnr", "value": page.find('input[name="s_bestellnr"]').val() },
            { "name": "form_submitted", "value": "dynaTable" }
            );
        $.ajax({ "dataType": 'json', "type": "POST", "url": sSource, "data": aoData , "success": fnCallback });
        }

I have some custom fields for filtering the data server-side, which i'm pushing along with the AJAX request. The problem is, I don't know how to trigger a JSON request from outside of the table. If the user types into the filter, fnServerData fires and updates the table. However, if the user picks a control outside of the table, I have no idea how to trigger the fnServerData function.

Right now I'm trying with a custom event I'm firing and listening to in fnInitComplete. While I can detect the user picking a custom filtering criteria, I'm missing all parameters needed for fnServerData to trigger correctly.

Question:
Is there a way to trigger fnServerData from a button outside of the actual dataTables table?

I guess I could try to add a space to the filter, but this is not really an option.

Thanks for input!

Question

like image 399
frequent Avatar asked Jul 19 '12 17:07

frequent


1 Answers

From a discussion here, Allan (the DataTables guy) suggests that simply calling fnDraw will yield the results you're looking for. This is the method I use for reloading server-side stuff (via fnServerData, which is important), and it's worked so far.

$("#userFilter").on("change", function() {
    oTable.fnDraw();  // In your case this would be 'tblOrders.fnDraw();'
});
like image 167
Chuck Avatar answered Sep 16 '22 21:09

Chuck