Sorting groups

castropereira

I have a table that has the items grouped into categories. In my data I have a column with the sort order for the categories ( not alphabetically). Any idea how can i sort from this column?
The Sort column is not visible in the table.

Another solution would be no manual sort the groups.

$.noConflict();
jQuery( document ).ready(function( $ ) 
    {

        $(document).ready(function() {
var groupColumn = 2;
var table = $('#example').DataTable({
    "columnDefs": [
        { "visible": false, 
          "targets": groupColumn, 
           }
    ],
    "order": [[ groupColumn, 'asc' ]],
    "scrollY": "400",
    "paging":   false,
    "scrollY": '70vh',
    "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 ( group, i ) {
            if ( last !== group ) {
                $(rows).eq( i ).before(
                    '<tr class="group"><td colspan="15">'+group+'</td></tr>'
                );

                last = group;
            }
        } );
    }
} );

// Order by the grouping
$('#example tbody').on( 'click', 'tr.group', function () {
    var currentOrder = table.order()[0];
    if ( currentOrder[0] === groupColumn && currentOrder[1] === 'asc' ) {
        table.order( [ groupColumn, 'desc' ] ).draw();
    }
    else {
        table.order( [ groupColumn, 'asc' ] ).draw();
    }
} );

} );
} );

colin

Hi @castropereira ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

castropereira

Here you have the requested link!

what i want is to be able to sort the categories manually

Like Couvert or Entradas should be the first, and Sobremesas (deserts) should be the last!

http://live.datatables.net/bigutima/1/edit?html,css,js,console,output

Best regards! (and sorry for not reading the rules)

colin

Hi @castropereira ,

Thanks for the example, that helps. It might be worth looking RowGroup as that's doing what you've implemented.

I've been trying to get the enum plugin working, but without success - see here. Not sure why it's not working, if I have time I'll try again next week.

Cheers,

Colin

allan

Its not working there before the enum plug-in doesn't take account of the HTML around the text:

<h3><div class= "container-fluid bg-info text-white"> Bebida</div></h3>

The plug-in could be altered to strip the HTML and then check against the list of options.

Allan