RowGroup custom rendering and data source change event combined?

RowGroup custom rendering and data source change event combined?

thowithowi Posts: 51Questions: 6Answers: 0

Hi all together,

I combined the custom rendering and the Data source change event examples from this page: https://datatables.net/extensions/rowgroup/examples/

Instead of average salary in the custom rendering example, I used the sum() function to have the sum of salary for each city.

I now need to have a sort option which will sort the groups using the summed up value. When I now click on the last column the single elements in each city will be ordered, but I need the whole groups ordered using the summed up values.

So, e.g. London is the city with the highest over all salaries, the "London group" should be up, next the second highest salary group and so on.

This is my current script: https://pastebin.com/KkwYcmNG

Hope you can help me out here! I tried to built an example in jsfiddle, but I wasn't able to get the custom rendering example running on jsfiddle. If you have a jsfiddle link with this example running I am happy to add all further details of my code.

Thank you so much!

Answers

  • colincolin Posts: 2,749Questions: 0Answers: 480

    Hi @thowi ,

    This example here should get you going - it's along the lines of what you're after,

    Cheers,

    Colin

  • thowithowi Posts: 51Questions: 6Answers: 0
    edited November 13

    Hi @colin

    Just checked that example and ordered the column "Salary" descending. This is the order I am seeing:
    1. London $1,200,000
    2. San Francisco $850,000
    3. New York $2,045,075 ($725,000 + $675,000 + $645,750)

    So New York should be at position 1 and not at position 3, because the whole group salary amount is larger than London.

    I added the following code block and it will only sort inside each group, but won't sort the whole groups

    // 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();
            }
        } );
    
  • colincolin Posts: 2,749Questions: 0Answers: 480

    Hi @thowi ,

    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

  • thowithowi Posts: 51Questions: 6Answers: 0

    Sorry, of course! I didn't get it doing with jsfiddle, but live.datatables worked fine!
    This is the link: http://live.datatables.net/surifeda/1/

  • colincolin Posts: 2,749Questions: 0Answers: 480

    Hi @thowi ,

    Thanks for that fiddle, that helped understand what you're doing. I did try it, but it looks like it's doing what I would expect. Could you give steps please on how to reproduce the problem, also saying what you would expect it to do,

    Cheers,

    Colin

Sign In or Register to comment.