Columns visibility not updated on AJAX state load

mambrus

I'm trying to use a stateLoadCallback() with the Buttons plugin, which stores the column visibility state transparently using DataTable's stateSaveCallback(). This is the latest DataTables version (I just built it up today throught this URL: https://datatables.net/download/#bs5/jszip-3.10.1/dt-2.0.3/b-3.0.1/b-colvis-3.0.1/b-html5-3.0.1/cr-2.0.0/date-1.5.2/fh-4.0.1/r-3.0.1/rr-1.5.0/sb-1.7.0/sr-1.4.0 ).

I should probably say that this is a very old project where I'm trying to upgrade DataTables and it's still using jQuery 1.9.1 - although everything seems to work just fine up so far.

Up to this point, everything seems to work just fine. When I inspect the JSON ouput from the state load AJAX URL, I can see the correct data, including the correct visibility setting of that hidden column.

However, this does nothing to the actual table on page. I can still see the column, and furthermore, now when I use the visibility toggle button and try to change visibility of any of the columns, all of the ticks from that button's dropdown disappear (while the actual column is hidden as it should be).

I'm directly using the example from here, with the exception of using those AJAX save and load handlers: https://datatables.net/extensions/buttons/examples/column_visibility/columns.html

This is my full sef of the DataTable options:

{
          "dom": "<<f><<'#buttons-wrapper'>B>>" +
          "<<tr>>" +
          "<'datatables_footer'<'datatables_records_info'i><'datatables_pagination'p><'datatables_perpage'l>>",
          "paging": true,
          "pagingType" : "full",
          "pageLength": 100,
          "lengthMenu": [[15, 30, 50, 100], [15, 30, 50, 100]],
          "stateSave" : true,
          "stateSaveCallback": function (settings, data) {
            // Send an Ajax request to the server with the state object
            $.ajax({
              url: "/datatables_save_state/" + encodeURIComponent( urlArgs.replace(/^\/?/, "").split("/")[0] ),
              data: data,
              dataType: "json",
              type: "POST",
              success: function () {}
            });
          },
          "stateLoadCallback": function (settings, callback) {
            $.ajax({
              url: "/datatables_load_state/" + encodeURIComponent( urlArgs.replace(/^\/?/, "").split("/")[0] ),
              dataType: "json",
              success: function (json) {
                callback(json);
              }
            });
          },
          "language": {
            url: 'https://cdn.datatables.net/plug-ins/2.0.3/i18n/sk.json',
              "paginate": {
              first: "<<",
                last: ">>",
                previous: "<",
                next: ">"
            },
            searchPlaceholder: "",
            search: Drupal.t("Filter"),
          },
          "order": [[0, "asc"]],
          fixedHeader: true,
          buttons: [
            'excel',
            'colvis',
          ],
          layout: {
            topStart: {
              buttons: [
                {
                  extend: 'colvis',
                  popoverTitle: 'Nastaviť viditeľné stĺpce'
                }
              ]
            }
          },
          "initComplete": function () {
            // pokracovat iba ak neni tabulka POUVV alebo Pouzivatelov
            if (urlArgs !== "/protocols/all" && urlArgs !== "/users") {
              var
                colNum = 4,
                filtered_items = {};

              $(".dt-search label" ).next().after(fnCreateSelect( oTable.column(colNum).data().filter( function( value, index ) {
                if ( !filtered_items[ value ] ) {
                  filtered_items[ value ] = 1;
                  return true;
                } else {
                  return false;
                }
              }), function () {
                oTable.columns( colNum ).search( $(this).val() ).draw();
              } ));
            }
          },
        }

allan

Hi,

Could you give me a link to a page showing the issue please? This example shows state saving and column visibility working together. It doesn't use Ajax to save the state, so possibly that is where the issue is, but I'd need a test case to be able to debug it.

Allan

mambrus

I've found out where the problem was. I'm using PHP as backend and json_encode / json_decode functions there. The browser seems to be sending true and false values to the backend as strings, so I had to change them to be real true/false values in the JSON-encoded value to be saved. This fixed the issue.

I'm not sure how to mark this question as answered, so if you can do so, that'd be most helpful