savedStates AJAX POST not in JSON

rmd

I'm trying to persist saved states in my backend application (Python / Flask / Mongo).

I can see from the example here: https://datatables.net/extensions/staterestore/examples/initialisation/predefinedAjax.html
that I simply need to pop in the saved states at the bottom of my ajax (from example):

  "stateRestore": {
    "Scroll and Order 3": {
      "start": 1036,
      "length": 54,
      "order": [
        [
          2,
          "asc"
        ]
      ],
      "scroller": {
        "topRow": 1069.1081081081081,
        "baseScrollTop": 39235,
        "baseRowTop": 1060.4054054054054,
        "scrollTop": 39557
      }
    }
  }

I'm using the following configuration:

buttons: ['searchBuilder', 'createState', {
                    extend: 'savedStates',
                    config: {
                        ajax: '/data/trail/savestates',
                        type: 'POST',
                    }
                },
           ],

Upon saving a state, my backed recieves a POST request. However, when I look at the data POSTed, I'm receiving it in the form:

{'action': 'save',
 'stateRestore[Waymarked Circular][c][_createInSaved]': 'false',
 'stateRestore[Waymarked Circular][c][ajax]': '/data/trail/savestates',
 'stateRestore[Waymarked Circular][c][create]': 'true',
 
- - - snip - - -

 'stateRestore[Waymarked Circular][order][0][]': '2',
 'stateRestore[Waymarked Circular][page]': '0',
 'stateRestore[Waymarked Circular][searchBuilder][criteria][0][condition]': 'contains',
 'stateRestore[Waymarked Circular][searchBuilder][criteria][0][data]': 'Tags',
 'stateRestore[Waymarked Circular][searchBuilder][criteria][0][origData]': 'tags',
 'stateRestore[Waymarked Circular][searchBuilder][criteria][0][type]': 'string',
 'stateRestore[Waymarked Circular][searchBuilder][criteria][0][value][]': 'circular',
 'stateRestore[Waymarked Circular][searchBuilder][criteria][1][condition]': 'contains',
 'stateRestore[Waymarked Circular][searchBuilder][criteria][1][data]': 'Tags',
 'stateRestore[Waymarked Circular][searchBuilder][criteria][1][origData]': 'tags',
 'stateRestore[Waymarked Circular][searchBuilder][criteria][1][type]': 'string',
 'stateRestore[Waymarked Circular][searchBuilder][criteria][1][value][]': 'waymarked',
 'stateRestore[Waymarked Circular][searchBuilder][logic]': 'AND',
 'stateRestore[Waymarked Circular][search][caseInsensitive]': 'true',
 'stateRestore[Waymarked Circular][search][regex]': 'false',
 'stateRestore[Waymarked Circular][search][search]': '',
 'stateRestore[Waymarked Circular][search][smart]': 'true',
 'stateRestore[Waymarked Circular][start]': '0',
 'stateRestore[Waymarked Circular][stateRestore][isPreDefined]': 'false',
 'stateRestore[Waymarked Circular][stateRestore][state]': 'Waymarked Circular',
 'stateRestore[Waymarked Circular][stateRestore][tableId]': 'traildata'
}

This is also confirmed by viewing the POST request on the browser side.

I will be able to parse this into JSON should it be required (although I've yet to come up with a tidy way to do it), however, I'm surprised that I would have to and that the data is not being sent to me in a true JSON format - e.g.:

'stateRestore': {
    'Waymarked Circular' : {
        'searchBuilder' : {
            'criterial': [{
                'condition': 'contains'

The version numbers I'm using are included here:

https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.12.1/b-2.2.3/r-2.3.0/sc-2.0.7/sb-1.3.4/sl-1.4.0/sr-1.1.1/datatables.min.js

Am I missing something?

Thanks,

Mark.

rmd

I've finally resolved my own issue:

            var table = $('#mydata').DataTable({
                buttons: ['searchBuilder',
                    'createState',
                    {
                        extend: 'savedStates',
                        config: {
                            update: false,
                            ajax: stateRestoreAjax,
                            type: 'POST',
                        }
                    },
                ],

With:

        function stateRestoreAjax(data, callback) {
            console.log(data.action)
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: '{{ url_for('data_savedstates') }}',
                data: JSON.stringify(data),
                dataType: "json",
                success: function (data) {
                    console.log(data)
                    callback(data);
                }
            });
            callback(data);
        }

On the server side:

@app.route('/data/savedstates', methods=['POST'])
def data_savedstates():
    response = make_response(User(current_user.get_id()).process_savedstates(json.loads(request.data.decode('utf-8'))))
    response.mimetype = 'application/json'
    return response

and

    def process_savedstates(self, data):

        if data['action'] == 'load':
            return self.profile['saved_states']
        elif data['action'] == 'save':
            saved_states = self.profile['saved_states']
            saved_states.update(data['stateRestore'])
            self.profile = dict(saved_states=saved_states)
            return ''
        elif data['action'] == 'remove':
            saved_states = self.profile['saved_states']
            for k in data['stateRestore'].keys():
                del saved_states[k]
            self.profile = dict(saved_states=saved_states)
            return ''
        elif data['action'] == 'rename':
            saved_states = self.profile['saved_states']
            old, new = list(data['stateRestore'].items())[0]
            saved_states[new] = saved_states.pop(old)
            self.profile = dict(saved_states=saved_states)
            return ''

        # TODO: this shouldn't happen - raise an exception
        pprint.pprint(data)
        return data

rmd

P.S. I'm now experiencing this issue: https://datatables.net/forums/discussion/73990/update-button-not-firing-with-extend-savedstates

allan

Thanks for the update - good to hear you have the original issue resolved. I'll take a look at the other thread shortly.

Allan