How do I trigger the ajax to server-side call please after hiding/unhiding columns?

Glyndwr

Sorry I can not find an applicable test case.

I have converted a DataTable to server-side. In the previous version I click on a button to alternate between showing the "Archived [date]" column and, in the SQL, including or excluding archived members. When I call the "archivedHidden" function the "Archived" column is shown/hidden; however, the server-side call is not made. I would have expected this to be done by the call back "showDataTable();".

How do I trigger the ajax to server-side call please?

This is function I call:

    $('#archivedHidden').on( 'click', function (e) {
        e.preventDefault();

        // Get the column API object
        var column = youthMemberTable.column(10);

        // Toggle the visibility
        column.visible( ! column.visible() );

        if($(this).text().trim() == 'Archived Hidden' ){
            $(this).text('Archived Shown');
            sessionStorage.setItem('ssArchived', "Shown");

        }else{
             $(this).text('Archived Hidden');
             sessionStorage.setItem('ssArchived', "Hidden");
        }

        showDataTable();
    } );

And this is the relevant DataTable code:

function showDataTable() {
//Show DataTable
moment.updateLocale(moment.locale(), { invalidDate: "" })

    if ( $.fn.dataTable.isDataTable( '#youthMemberTable' ) ) {
    var youthMemberTable = $('#youthMemberTable').DataTable();
}
else {
    var youthMemberTable = $('#youthMemberTable').DataTable( {

        "info":     false,
        "order": [[ 2, "asc" ], [ 3, "asc" ], [ 4, "asc" ]],
        "pageLength": 10,
        "lengthMenu": [10, 20, 50, 100, 200],
        "processing": true,
        "serverSide": true,
        "ajax":{
            url : 'YouthMemberAdminListView',

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

Glyndwr

This is a copy of you client-side example and amended: http://live.datatables.net/idinat/752/edit

kthorngren

The test case doesn't run correctly. Looks like you have Ajax URLs that are not accessible. You can try one of the Server Side scripts here for URLs that work in the live.datatables.net environment.

However to force a call to the server side script use draw(). Just changing column visibility doesn't require a table update, ie, call to draw(). So you need to do so.

Kevin

Glyndwr

Hi Kevin,

OK, this does send the request to the server-side; however, the ajax parameters are not refreshed (i.e., I have changed the session parameter sessionStorage.setItem('ssArchived', "Shown"); however, the server-side is still receiving the original null value).

I have also tried:

• youthMemberTable.clear().draw();
• youthMemberTable.draw('full-hold');
• youthMemberTable.draw(false);

Note: the call to the database is required to pick up the archived members or ignore the archived members.

Kind regards,

Glyn

Glyndwr

Hi Kevin,

I am going to try a different approach of including all rows and then toggling between showing or hiding an archived row. I have raised the question in the forum.

Kind regards,

Glyn

kthorngren

Note: the call to the database is required to pick up the archived members or ignore the archived members.

Are you using ajax.data for these additional parameters to be sent to the server?

Kevin

Glyndwr

Hi Kevin,

Yes:

 "ajax":{
    url : 'YouthMemberAdminListView',
    data : {
        ssAccountLevel : sessionStorage.getItem('ssAccountLevel'),
        ssAccountID : sessionStorage.getItem('ssAccountID'),
        ssArchived : sessionStorage.getItem('ssArchived'),
        ssGroupSection : sessionStorage.getItem('ssGroupSection'),
        filterSurname : filterSurname,
    },

Kind regards,

Glyn

allan

Can you show me your unabbreviated DataTables initialisation code? And also the server-side code you are using?

I'm wondering if your server is expecting POST data, but the client-side is sending a GET request.

Allan

kthorngren

OK, this does send the request to the server-side; however, the ajax parameters are not refreshed

Take a look at the ajax.data examples. You are sending static data, meaning it won't change for each request, to the server. You need to create a function, like the 2nd or 3rd example, for dynamic data.

If this doesn't help then provide the information Allan asked for.

Kevin

Glyndwr

Ohhh; brilliant! That also solves my column filtering issue. This is what I am now doing:

"ajax":{
url : 'YouthMemberAdminListView',
data : function (d){
d.ssAccountLevel = sessionStorage.getItem('ssAccountLevel');
d.ssAccountID = sessionStorage.getItem('ssAccountID');
d.ssArchived = sessionStorage.getItem('ssArchived');
d.ssGroupSection = sessionStorage.getItem('ssGroupSection');
d.filterSurname = filterSurname;
d.filterFirstName = filterFirstName;
d.filterBOB = filterBOB;
d.filterGender = filterGender;
d.filterNumber = filterNumber;
d.filterStart = filterStart;
d.filterInvested = filterInvested;
d.filterNotBirthday = filterNotBirthday;
},

With many thanks and kind regards,

Glyn