savedStates AJAX POST not in JSON

savedStates AJAX POST not in JSON

rmdrmd Posts: 4Questions: 1Answers: 0

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.

Answers

  • rmdrmd Posts: 4Questions: 1Answers: 0

    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
    
  • allanallan Posts: 63,498Questions: 1Answers: 10,470 Site admin

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

    Allan

Sign In or Register to comment.