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

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

GlyndwrGlyndwr Posts: 117Questions: 32Answers: 0

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',

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • GlyndwrGlyndwr Posts: 117Questions: 32Answers: 0

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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • GlyndwrGlyndwr Posts: 117Questions: 32Answers: 0

    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

  • GlyndwrGlyndwr Posts: 117Questions: 32Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • GlyndwrGlyndwr Posts: 117Questions: 32Answers: 0

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

    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

  • GlyndwrGlyndwr Posts: 117Questions: 32Answers: 0

    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

This discussion has been closed.