asked    Selena     2018-10-22       javascript       48 view        2 Answers

[SOLVED] Datatables colReorder saving WITHOUT statesave

I am using datatables and am using colReorder and need to save the state of the columns without using statesave(I am not allowed to use localcache). I do however have a preference table in my database for storing this kind of information in JSON format.

I have looked at colReorder.order() which looks like what I need to get the order.

What I'm thinking so far is on a column change, call colReorder.order() and place that returned array in my preferences table and then on re-initialization use that to re-order the table.

So my question/what I need help on is this: On a change of the colOrder, I need to save the order they're in and update my preferences. How do I do this? I can't seem to find "where" to place the colReorder.order(). I haven't seen an onChange() for datatables or even sure if that would be the best way to approach this

EDIT: David's answer is the ideal solution, however not applicable in my situation due to code already existing and laziness.

My solution/work-around that I found was to stringify and save details.mapping from within this function to my preferences and on initialization of my table I use colReorder.order(savedArray[],true).

Leaving it in case anyone finds themselves in the situation I was in.

  2 Answers  

        answered    Harvey     2018-10-22      

Actually DataTables provide methods for storing and retrieving state to and from an alternative location. Look at stateSaveCallback and stateLoadCallback.

I do however have a preference table in my database for storing this kind of information in JSON format

Then you just need to fill out the "blanks". Lets assume you have a serverside script called statesave that can store and retrieve the state by 'set' and 'get' using an unique userId. The skeleton would look like this:

$('#example').DataTable({
  stateSave: true,
  stateSaveCallback: function(settings, data) {
     $.ajax( {
      url: 'statesave',
      dataType: 'json',
      data: { 
        action: 'set', 
        userId: aUserId,
        state: data 
      }
    })
  },
  stateLoadCallback: function(settings) {
     var state;
     $.ajax( {
       url: 'statesave',
       dataType: 'json',
       async: false,
       data: { 
         action: 'get', 
         userId: aUserId
       },
       success: function(data) {
         state = data
       })
     })
     return state
  }
})


        answered    Hugo     2018-10-22      

It sounds like you are using the server-side processing option. If that's the case, you can add the column reorder array to the sent parameters object and save it that way.





Your Answer





 2018-10-22         Otis

how to test private function outside react component

I have a private function outside component. It sounds more convenient to do test for function alone better than test it inside MyComponent, but it's private not exported.function func(){ return something;}export default class MyComponent extends Component {render <SomeComponent someProp={func()} />}I use mocha and enzyme for test and I wonder if there is anyway to test private function rather than test it inside the component. func is defined in module scope. It's not possible to reach variables outside the scope they were defined in JavaScript.Even if func were e...
 javascript                     2 answers                     28 view
 2018-10-22         Ruby

Sliding Menu in React

I want to create a file separator styled menu in react. I'm not very familiar with css, so i need a starting point. I have found many such menu components but all of them are full page.I dont understand how to create the shape of the component, if it were a simple rectangle it would be possible, but the shape is the rectangle plus the button, i dont know how to manage that.It will look something like this :Alter clicking on "Filter Menu", it will slide into view: That is actually a CSS/HTML only question.However, to develop from scratch:Draw a two column table and have ...
 javascript                     2 answers                     23 view
 2018-10-22         Samantha

React : new date() shows date of client machine rather than server

This question already has an answer here: What time zone does the Javascript new Date() use? 4 answers That is how javascript date works. Please refer to MDN docs for Date for more details. Also checkout the the parameters you can send to customize it. If no arguments are provided, the constructor creates a JavaScript Date object for the current date and time according to system settings for timezone offset Where Date is called as a constructor with more than one argument, the speci...
 javascript                     1 answers                     24 view