Answers

• Wernfried Posts: 10Questions: 3Answers: 0

  December 22

  After some testing, I have to revert my statement "The data is properly send for Ajax and state is properly saved, including all columnControl settings, that's working fine."

  Ajax works fine. However, the columnControl state is saved properly, but when you reload the page, i.e. when state is loaded then saved search values are used only for plain searches but searchList are not used.
• allan Posts: 65,430Questions: 1Answers: 10,865 Site admin

  December 22

  Are you able to provide a link to a test case showing the issue please?

  Thanks,
  Allan
• Wernfried Posts: 10Questions: 3Answers: 0

  December 23

  Let's split my post and focus to one issue each.

  ajax.data not complete

  When you use Server-Side processing and columnControl, then sent data is enriched with columnControl data, see Server-side processing

  Here full config to demonstrate.

  $("#dataTable").DataTable({
    columns: [
       { name: 'id', data: 'id', title: 'ID' },
       { name: 'age', data: 'age', title: 'Age', columnControl: ["order", [{ extend: "searchNumber" }]] },
       {
          name: 'name', data: 'name', title: 'Name',
          columnControl: [
             "order", [{
                extend: "searchList",
                options: [
                   { label: 'Brad', value: 'Bradley Greer' },
                   { label: 'Tiger', value: 'Tiger Nixon' }
                ]
             }]
          ]
       }
    ],
    layout: {
       topStart: { buttons: ["colvis", "ccSearchClear"] },
       topEnd: "search"
    },
    ajax: {
       url: '#',
       contentType: 'application/json',
       submitAs: 'json',
       type: 'POST',
       beforeSend: function (jqXHR, settings) {
          let data = JSON.parse(settings.data);
          console.log(`beforeSend => ${JSON.stringify(data.columns.map(x => x.columnControl), null, ' ')}`)
       },
       data: function (data) {
          console.log(`ajax.data => ${JSON.stringify(data.columns.map(x => x.columnControl), null, ' ')}`)
       }
    },
    serverSide: true
  });
  

  Open the page. No data is loaded/shown, but this does not matter. Set some filter, e.g.

  

  

  console.log in data prints

  ajax.data => [
     null,
     null,
     null
  ]    
  

  but console.log in beforeSend prints

  beforeSend => [
     null,
     {
        "search": {
           "value": "1",
           "logic": "greater",
           "type": "num"
        }
     },
     {
        "list": {
           "0": "Bradley Greer"
        }
     }
  ]
  

  The result should be the same.

  The data which is sent to server is 100% correct, however ajax.data does not include the columnControl addon. So, there is no easy way to manipulate columnControl related data before it is send to the server.
• Wernfried Posts: 10Questions: 3Answers: 0

  December 23

  Next issue:

  stateSaveParams.data not complete

  $("#dataTable").DataTable({
     data: [
        { id: 1, age: 31, name: "Tiger Nixon" },
        { id: 2, age: 63, name: "Bradley Greer" }
     ],
     columns: [
        { name: 'id', data: 'id', title: 'ID' },
        { name: 'age', data: 'age', title: 'Age', columnControl: ["order", [{ extend: "searchNumber" }]] },
        {
           name: 'name', data: 'name', title: 'Name',
           columnControl: [
              "order", [{
                 extend: "searchList",
                 options: [
                    { label: 'Brad', value: 'Bradley Greer' },
                    { label: 'Tiger', value: 'Tiger Nixon' }
                 ]
              }]
           ]
        }
     ],
     stateSave: true,
     stateSaveParams: (settings, data) => {
        console.log(`stateSaveParams => ${JSON.stringify(data.columnControl, null, ' ')}`);
     }
  }).on('draw', function (e, settings) {
     $.each(localStorage, function (key, value) {
        if (key.startsWith('DataTable')) {
           let data = JSON.parse(value)
           console.log(`localStorage => ${JSON.stringify(data.columnControl, null, ' ')}`);
        }
     })
  });
  

  Open the table and do some filtering, like in previous example.

  stateSaveParams prints

  stateSaveParams => undefined
  

  but in localStorage you have

  localStorage => {
   "1": {
    "searchInput": {
     "logic": "greater",
     "type": "num",
     "value": "10"
    }
   },
   "2": {
    "searchList": [
     "Bradley Greer"
    ]
   }
  }
  

  The issue is similar to the previous one.
  The data which is sent to localStorage is 100% correct, however stateSaveParams.data does not include the columnControl addon. So, there is no easy way to manipulate columnControl related data before it is send to localStorage.
• Wernfried Posts: 10Questions: 3Answers: 0

  December 23

  Next issue:

  searchList dropdowns are not restored from localStorage

  Use the same setup as before, and do some columnControl filtering

  

  

  Refresh the page.

  Filtering for age is restored from localStorage, however name is not:

  

  Please note, in the table the filter is applied properly (you see only one row for Bradley Greer). But the dropdown list in columnControl search is not updated. It may look like only a cosmetic issue. However, when you use server-side processing, then the server has no information about any searchList filtering which was restored from the localStorage.
• allan Posts: 65,430Questions: 1Answers: 10,865 Site admin

  December 23 Answer ✓

  The data which is sent to server is 100% correct, however ajax.data does not include the columnControl addon.

  Interesting one. The issue is that preXhr, which ColumnControl uses to add its data, is executed after the ajax.data function. In this case that is certainly wrong, but I'm hesitant to immediately change the order in case there is something I'm not thinking of that would cause a problem. The documentation for preXhr doesn't say where in the sequence it will trigger, so it is something that could change. I've got a note to look into this more.

  What what it is worth though, if you want to submit a JSON string to the server, use ajax.submitAs.

  stateSaveParams => undefined

  The stateSaveParams callback is happening before the stateSaveParams event. If you do table.on('stateStaveParams', ...) instead then it should work.

  I will have a think about how I can have the extension events happen before the developer's listeners. That is an important point there.

  searchList dropdowns are not restored from localStorage

  This is very much a bug. Thanks for letting me know about it. I've committed a fix and will be releasing ColumnControl 1.2 with the change (and your PR) shortly.

  Allan
• Wernfried Posts: 10Questions: 3Answers: 0

  December 23

  Thank you, I will test it after Christmas.
  The 3rd issue was most relevant for me, thanks for the fix. Issue 1 and 2 are more cosmetic.

  Wernfried