DataTables grouping with ordering

DataTables grouping with ordering

Abdelrahman_AlnasharAbdelrahman_Alnashar Posts: 10Questions: 2Answers: 0

I have a DataTable for grouping users who are active and inactive, I want to be able to order the inactive users first, then the active ones. The code below results in grouping the active users first, I want the opposite.

columnDefs: [
            { visible: true, targets: groupColumn }
          ],
          order: [[groupColumn, 'asc']],
        displayLength: 10,
        lengthMenu: [10, 15, 20, 25, 30],
        drawCallback: function(settings) {
            var api = this.api();
            var rows = api.rows({ page: 'current' }).nodes();
            var last = null;
            api.column(groupColumn, { page: 'current' })
                .data()
                .each(function(user_status, i) {
                  var group = user_status === "Inactive" ? "Inactive Users" : "Active Users";
                  
                  if (last !== group) {
                        $(rows)
                            .eq(i)
                            .before(
                              '<tr class="group" ' + groupStyle + '><td colspan="4">' +
                                group +
                                '</td></tr>'
                            );

                        last = group;
                    }
                    
                });
          }

Answers

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    I'm not clear how that grouping would be expected to work with searching and ordering. It would be worth looking at RowGroup, or possibly just using option order to set an initial order to the table. If you want the Active users to always be at the top of the table, it would be worth looking at the Absolute ordering plugin.

    Colin

  • Abdelrahman_AlnasharAbdelrahman_Alnashar Posts: 10Questions: 2Answers: 0

    I added the Absolute ordering plugin, and I am still getting the active users to be ordered first in the dataTable.

    <script src="https://cdn.datatables.net/plug-ins/1.10.19/sorting/absoluteOrder.js"></script>
    
    
    var absoluteOrder = $.fn.dataTable.absoluteOrder([
        { value: 'Inactive', position: 'top' }
      ]); 
    
    columnDefs: [
                { visible: true, targets: groupColumn },
                { targets: groupColumn, type: absoluteOrder} 
              ],
              order: [[groupColumn, 'asc']],
            displayLength: 10,
            lengthMenu: [10, 15, 20, 25, 30],
            drawCallback: function(settings) {
                var api = this.api();
                var rows = api.rows({ page: 'current' }).nodes();
                var last = null;
                api.column(groupColumn, { page: 'current' })
                    .data()
                    .each(function(user_status, i) {
                      var group = user_status === "Inactive" ? "Inactive Users" : "Active Users";
                       
                      if (last !== group) {
                            $(rows)
                                .eq(i)
                                .before(
                                  '<tr class="group" ' + groupStyle + '><td colspan="4">' +
                                    group +
                                    '</td></tr>'
                                );
     
                            last = group;
                        }
                         
                    });
              }
    
  • Abdelrahman_AlnasharAbdelrahman_Alnashar Posts: 10Questions: 2Answers: 0
  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

    I want to be able to order the inactive users first, then the active ones

    Use orderFixed to apply an initial order to the table that the end user cannot change (unless you provide a way to do so via the API).

    Allan

  • Abdelrahman_AlnasharAbdelrahman_Alnashar Posts: 10Questions: 2Answers: 0

    I hope this helps. As you can see, if the user_name is "Inactive" then the user will be displayed in the Inactive User's group; otherwise, it will be displayed in the Active User's group. What I want exactly is for the Inactive User's group to be displayed first in the data table.

    {
    "data": {
            "current_page": 1,
            "data": [
                {
                    "id": 1,
                    "user_id": 3,
                    "project_id": 15,
                    "created_at": "2024-05-17T08:46:25.000000Z",
                    "updated_at": "2024-05-17T08:46:25.000000Z",
                    "user_name": "John",
                    "email": "johndoe@gmail.com",
                    "user": {
                        "id": 3,
                        "name": "john",
                        "email": "johndoe@gmail.com"
                    }
                },
                {
                    "id": 2,
                    "user_id": 4,
                    "project_id": 15,
                    "created_at": "2024-05-20T07:26:25.000000Z",
                    "updated_at": "2024-05-20T07:26:25.000000Z",
                    "user_name": "Inactive",
                    "email": "doejohn@gmail.com",
                    "user": {
                        "id": 4,
                        "name": "Inactive",
                        "email": "doejohn@gmail.com"
                    }
                }
            ]
     }
    }
    
  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

    Thanks for the clarification - it sounds like the absolute sorting described here will be what you want. Set it up so a column displayed the user_name data point and us the absolute sorting plugin to show "Inactive" first. The row grouping is based off the sorting order.

    Allan

Sign In or Register to comment.