Can I group by more than one column?

Can I group by more than one column?

dhDTforwebdhDTforweb Posts: 19Questions: 4Answers: 0

This page shows how to group by column.
https://datatables.net/examples/advanced_init/row_grouping.html
I got that to work great.
Can I do more than one grouping?
Like this:
Group on Column One
Group on Column Two
I am also using a purchased version of Editor if that helps
Thanks

This question has accepted answers - jump to:

Answers

  • colincolin Posts: 2,381Questions: 0Answers: 427

    Hi @dhDTforweb ,

    The best way to do this is to use the RowGroup extension, there is can be easily done like this here.

    Thanks for the purchase, I hope you're getting the hang of Editor!

    Cheers,

    Colin

  • allanallan Posts: 48,075Questions: 1Answers: 6,907 Site admin

    The current release of RowGroup only allows for a single level of grouping. However, multi-level grouping is already committed and will be in the next version (or use the git version) :).

    Allan

  • dhDTforwebdhDTforweb Posts: 19Questions: 4Answers: 0

    Colin, I copied your example to a html file in my web server folder and it worked perfectly.
    However, I can't get the same functionality in my original file.
    This gives me one grouping on 'subtype' field
    var table = $('#subUnit').DataTable( {
    order: [[3, 'asc'], [5,'asc']],
    rowGroup: {
    dataSrc: ["subtype"]
    },
    But adding a second grouping column gives me a 'no group' message where the group value would be
    var table = $('#subUnit').DataTable( {
    order: [[3, 'asc'], [5,'asc']],
    rowGroup: {
    dataSrc: ["subtype", "section"]
    },
    The column numbers work in the order: section, but not in the rowGroup: section.
    I copied the links from the <head> to my html file.
    I added the CSS in a <style> section

    Alan, I guess I need the updated files? How do I download only the new files I need from github? Can I merge them into my current datatables/editor files?
    Thanks for your help,

  • colincolin Posts: 2,381Questions: 0Answers: 427

    Hi @dhDTforweb ,

    Are you using the nightly versions (https://nightly.datatables.net/rowgroup)? As Allan said, that functionality hasn't been released yet so needs to taken from there.

    If you, the best bet would be to either post a link to your page, or run the debugger, as that will tell us what versions you are using.

    Cheers,

    Colin

  • dhDTforwebdhDTforweb Posts: 19Questions: 4Answers: 0

    Ok, I ran the debugger and got this upload code
    Upload complete - elekoy
    Does that help you?
    Thanks!

  • dhDTforwebdhDTforweb Posts: 19Questions: 4Answers: 0

    I see the nightly files, but can't figure out where to put them on my server

  • colincolin Posts: 2,381Questions: 0Answers: 427

    I see the nightly files, but can't figure out where to put them on my server

    That'll be the problem, you won't be using the files with it in. You can either download then and keep it with your standard source, or to test that it works, just reference that script location as I did in my example.

  • dhDTforwebdhDTforweb Posts: 19Questions: 4Answers: 0

    I added:
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
    <script src="https://nightly.datatables.net/rowgroup/js/dataTables.rowGroup.js?_=6e799325be6f763b41c5c21989f76ec9"></script>
    to my code. Now the multi-level row grouping works. Thanks!

    However, I can't get inline editing to work.
    I checked the boxes for row order and select and downloaded the code here https://datatables.net/download/index

    I downloaded the github RowGroup files (https://github.com/DataTables/RowGroup) to Datatables/RowGroup-1.0.3 to get the latest build that makes the multi-column grouping work.

    I used only these two links in my php view file:
    <link rel="stylesheet" type="text/css" ref="DataTables/datatables.min.css"/>
    <script type="text/javascript" src="DataTables/datatables.min.js"></script>

    I get these errors in the console only when the above two links are included.
    Uncaught SyntaxError: Unexpected token < datatables.min.js:1
    Uncaught ReferenceError: $ is not defined at 8:62

    Is there a typo in datatables.min.js?

  • dhDTforwebdhDTforweb Posts: 19Questions: 4Answers: 0

    Here is the upload code:
    Upload complete - urobub

  • colincolin Posts: 2,381Questions: 0Answers: 427
    Answer ✓

    Hi @dhDTforweb ,

    Thanks for that code - if you follow that debug link, you'll see you're on fairly old versions of DataTables. You're using 1.10.10, so definitely not the nightly build, so a bit surprised that the grouping works! But, if it does, perfect :)

    Regarding the new error, you would normally see that if you've put those library files before jQuery. Everything is dependent upon jQuery so that needs to go first,

    Hope that gets it going. If not, we're happy to take a look if you can link to your page.

    Cheers,

    Colin

  • dhDTforwebdhDTforweb Posts: 19Questions: 4Answers: 0

    Here is the page:
    https://quiet-wildwood-42059.herokuapp.com/index.php/Equipment/viewSingleEquipment/4
    It is a rough draft, but everything works so far except inline editing.
    Thanks for all your help!

  • dhDTforwebdhDTforweb Posts: 19Questions: 4Answers: 0

    Ok, I think I got it. Had to change the table name
    Thanks for your help!

  • dhDTforwebdhDTforweb Posts: 19Questions: 4Answers: 0

    Do you have any idea why the buttons aren't appearing?
    https://quiet-wildwood-42059.herokuapp.com/index.php/Equipment/viewSingleEquipment/2
    Thanks

  • kthorngrenkthorngren Posts: 3,681Questions: 19Answers: 823
    edited October 4 Answer ✓

    The problem is likely due to loading jQuery and the Datatables CSS and JS files more than once. You are loading them toward the top of the HTML then building the first Datatable then loading jQuery and the DT JS and CSS then your second table. You only want to load them once.

    Kevin

  • dhDTforwebdhDTforweb Posts: 19Questions: 4Answers: 0

    Thanks! Got it

Sign In or Register to comment.