dynamic grouping selection field doesn't work right in drawCallback

JúniorSiqueira

Good afternoon.
I am using datatables with laravel.
In my blade view I have my table and added a salect field to group the data according to the selected value.

<div class="col-xl-3 col-md-6 col-sm-12 mb-2">
                    <div class="form-group">
                      <select class="select2 form-control" id="select_group" name="select_group">
                        <optgroup label="Grupos">
                          <option value=""></option>
                          <option value="6">Modalidades</option>
                          <option value="10">Médicos</option>
                        </optgroup>
                      </select>
                      <p><small class="text-muted">Pesquise selecionando um dos filtros.</small></p>
                    </div>
                  </div>

And in my js file where I manipulate the datatables, I want to do the sorting in drawCallback.
This is the code snippet I have:

"order": [[ 8, "desc" ]],
"drawCallback": function ( settings ) {
      var columnValue = $('#select_group').val();
      if (columnValue != ''){
        var api = this.api();
        var rows = api.rows( {page:'current'} ).nodes();
        var last=null;

        api.column(columnValue, {page:'current'} ).data().each( function ( group, i ) {
          console.log(group)
          if ( last !== group ) {
            $(rows).eq( i ).before(
                '<tr class="group"><td colspan="11">'+group+'</td></tr>'
            );

            last = group;
          }
        } );
        worklist.order([[ columnValue, "asc" ],[ 8, "desc" ]]);
        console.log(worklist.order())

      }
    },

I have some columns in the table and by default I use "order": [[ 8, "desc" ]]

In the case above I need that, for the grouping to work well, when I select the EX value: <option value="6">Modalities</option> the table is sorted both by column 8 and by column 6. But what happens is that when I select the Modalities field and click on the filter button, the table reloads but only with the ordering in column 8, but if I click on the filter button again, then the ordering by column 6 is also added. I've tried several solutions but I can't solve this problem.

I put a youtube link from the screen recording of my stream.
https://www.youtube.com/watch?v=EZF87X7Jwr4

Then in the video I start showing the html code and my js file. The data table is already sorted by default by column 8 as you can see. When I select the modalities field that has value 6, it was to sort by the column I informed and by column 8 tbm. Only that doesn't happen. In the first request, the table remains ordered by column 8 but with the groups that are repeated (I show the ordering in the console). When I click on the filter button for the second time, the grouping and ordering work correctly for columns 6 and 8. I don't know why the first request doesn't work. I appreciate any help.

kthorngren

I suspect you will want to place the worklist.order([[ columnValue, "asc" ],[ 8, "desc" ]]); statement in your filter button click event so its executed before the ajax request is sent. The drawCallback will be executed after the server side response and the table is drawn.

Kevin

JúniorSiqueira

Thanks Kevin for the help. I've tried so many things that I don't even think I understood how you advised. Could you show me an example with this code that I posted please.

kthorngren

I don't see the Filter click event. In the click event you are probably using the draw() API to update the table. Just add the order() API to the draw, something like this:

worklist.order([[ columnValue, "asc" ],[ 8, "desc" ]]).draw();

This way the order is set before the draw request is sent to the server.

If you still want an example then please build a simepl test case that shows what you have. You can start with this server side example:
http://live.datatables.net/riricihi/1/edit

Kevin

allan

Out of interest, is the a reason you are using this approach rather than the RowGroup extension?

Allan

JúniorSiqueira

Good night Allan. Yeah friend, I even tried to do with the rowGroup but I couldn't. Could you help me in this scenario? In my research that I send the data by ajax I have this select field that serves the user to define what kind of ordering he needs if he wants any.

kthorngren

You may need to use orderFixed to to force the table to order by the grouping column first regardless what the user selects. If this doesn't help please provide a test case showing an example of what you have so we can provide suggestions.

Kevin