Change datasource on click

DespyNL

Hi,

On page load I display the JSON output of employee.php in a datatable. By clicking on the student button I want to change the datasource to students.php.

To this point this works, but I am stuck with the aoColumns. How can I customize the column by clicking on the student button? The student JSON output has different column names. I also would like to associate the rowId to another field.

$(document).ready(function () {
    dt = $('#peopleTable').DataTable({
        ajax: {
            "url": '/employee.php',
            "dataSrc" : ""  
        },
        sDom: '<"toolbar">Bfrtp',
        aoColumns: [
            { data: "id", visible: false },
            { sTitle: "Lastname", data: "lastname", sWidth: "200px" },
            { sTitle: "Initials", data: "initials", sWidth: "75px" },
            { sTitle: "Company", data: "company", sWidth: "200px" },
            { sTitle: "Employee", data: "employee", sWidth: "200px" },
            { sTitle: "Modified", data: "modified", sWidth: "150px" }
        ],
        select: true,
        rowId: 'id',
        deferRender: true
    });

    setInterval(function() {
        dt.ajax.reload(null, false);
    }, 5000);

    $('.studentbutton').on('click', function() {
        dt.ajax.url('students.php').load();
    });
});

Help is appreciated.

Thanks,
Dennis

DespyNL

Okay, it took a while before I realized what needs to be done to achieve this. The best solution I can think of now is to re-initialize the table.

/**
 * Datatable: initialize table 
 * 
 * @param string title: title of toolbar
 * @param string url: data source url
 * @param json columns: column definition
 * @param string rowid: datatable DOM id
*/
function fnInitializeDataTable(title, url, columns, rowid) {
        
    // clear existing datatable and prepare for next initialization
    if( $.fn.DataTable.isDataTable( '#peopleTable') ) {
            
        // empty parent div of #peopleTable and append empty table
        $( '#peopleDiv' ).empty().append( '<table id="peopleTable" class="table cell-border"></table>' );
                
    }
            
    // create new datatable                 
    dt = $( '#peopleTable' ).DataTable({
        ajax: {
            url: url,
            dataSrc : ""    
        },
        sDom: '<"toolbar">Bfrtp',
        aoColumns: columns,
        select: true,
        rowId: rowid,
        deferRender: true
    });
                
    $("div.toolbar").html(title);   
}

$('.studentbutton').on('click', function() {
    var column = [ {data: "studentid"}, {data: "initials"}, {data: "lastname"} ]        
    fnInitializeDataTable('Student table', '/students.php', column, 'studentid');
});

For now this seems to work.