0

I'd like to use PACE for Datatable's ajax requests. So , I disabled the datatable's processing as processing : false. And then what do I need to work PACE's processing bar for showing every Datatable's ajax requests ?

Cataclysm
  • 7,592
  • 21
  • 74
  • 123

3 Answers3

4

It sounds like it should just work by default for AJAX requests, if you're wanting it to apply for sorting/processing events you might need something like the following:

Adapted from https://datatables.net/reference/event/processing You'll probably want to trigger PACE on the datatable processing event by the sounds of things:

$('#dataTable')
    .on( 'processing.dt', function ( e, settings, processing ) {
        if(processing){
            Pace.start();
        } else {
            Pace.stop();
        }
    })
.dataTable();
Brian
  • 2,822
  • 1
  • 16
  • 19
  • 1
    You could also use the preXhr and xhr events if it doesn't work automatically on AJAX - https://datatables.net/reference/event/preXhr, and https://datatables.net/reference/event/preXhr for the documentation on those particular events. It should be fairly trivial to adapt the above examples to those particular events (on `preXhr.dt` and on 'on `xhr.dt`) would be the two events that need hooking – Brian Oct 03 '16 at 03:58
  • In my application, I have many pages using datatable with different **id**s. Can I make the setting for globally instead of modifying existing codes as your answer ? – Cataclysm Oct 03 '16 at 04:06
  • It is work as you described. Am I still need to set `ajax` option of **pace** to `false` ? – Cataclysm Oct 03 '16 at 04:17
  • 1
    I'd suggest applying a class to them that you can then use globally ie `$('.pace-dt').on...` If you manually trigger `Pace.start` and `Pace.stop` via event handlers you may need to set it false if you want to prevent other AJAX requests triggering Pace. If applying a class doesn't work with the above try something like `$('.pace-dt').each(function(){ $(this).on.... })` – Brian Oct 03 '16 at 08:28
  • Gotta stress that I'd expect that PACE should be able to automatically detect the AJAX requests and manually triggering shouldn't be required unless using it for something like a sort that might take some time on the client side. – Brian Oct 03 '16 at 08:31
1

Well if you want to show the PACE for every ajax request in your application then you can specify it like below

Adding the pace options before loading it. 

    <script>
        window.paceOptions = {
            ajax: {
                trackMethods: ['GET', 'POST', 'PUT', 'DELETE', 'REMOVE']
            }
        };

    </script>
    <script src="../js/progressBar/pace.min.js"></script>

This will show up your PACE progress bar for every ajax request to your server.

Prakash Thete
  • 3,802
  • 28
  • 28
  • Yes you right .. I had also read about this from [PACE Documentation](http://github.hubspot.com/pace/) but I think it is not effect on DataTable's ajax request. But I am not sure cos I'm running on localhost and request are too fast. – Cataclysm Oct 03 '16 at 06:53
  • In my case it works perfectly fine when loading the `DataTables` (through `DataTables` ajax request). Can you create a `JSFiddle` of your problem ? – Prakash Thete Oct 03 '16 at 06:56
  • In my case it works on first-time page loading. I would like to get this on triggering [dataTable search](https://datatables.net/reference/api/search()) also. – Cataclysm Oct 03 '16 at 07:07
  • You are doing server side processing or client side? If its server side then it will work, If client side then it will not. – Prakash Thete Oct 03 '16 at 07:09
1

Is simple use this form:

$('#dataTable').on('processing.dt', function(e, settings, processing) {
    if (processing) {
      Pace.stop();
      Pace.bar.render();
    } else {
      Pace.stop();
    }
  }).DataTable();
Robson Pontes Silva
  • 11
  • 1