Row grouping on 2 table per page

Row grouping on 2 table per page

yurispyyurispy Posts: 29Questions: 6Answers: 0

Hello,
I have a problem with 2 tables that uses this function.
Uncaught TypeError: Cannot read property' each' of undefined
I tried the 2 tables on separate pages, and I don't have any problem, whereas once on the same page, it works only on the 2nd tables.
This does not apply to the 1st.

Row grouping on 2 tables per page

Answers

  • kthorngrenkthorngren Posts: 21,324Questions: 26Answers: 4,949

    Row grouping with two tables works here:
    http://live.datatables.net/yovefasa/1/edit

    Can you post a test case showing your issue?
    How-to-provide-a-test-case

    Kevin

  • yurispyyurispy Posts: 29Questions: 6Answers: 0
    edited February 2018
    $(document).ready(function() {
        var table = $('table.fiche_culture_autre').DataTable({
            "autoFill": false,
            "ordering": true,
            "info": false,
            "paging": false,
            "language": {
            "url": "//cdn.datatables.net/plug-ins/1.10.10/i18n/French.json"
            },
            "columnDefs": [
                { "visible": false, "targets": 1 }
            ],
            "order": [[ 1, 'asc' ]],
            "drawCallback": function ( settings ) {
                var api = this.api();
                var rows = api.rows( {page:'current'} ).nodes();
                var last=null;
                api.column(1, {page:'current'} ).data().each( function ( group, i ) {
                    if ( last !== group ) {
                        $(rows).eq( i ).before(
                            '<tr class="group"><td colspan="10">'+group+'</td></tr>'
                        );
                        last = group;
                    }
                } );
            }
        } );
    
    } );`
    
    `$(document).ready(function() {
        var table = $('table.travaux_en_cours').DataTable({
            "autoFill": false,
            "ordering": true,
            "info": false,
            "paging": false,
            "language": {
            "url": "//cdn.datatables.net/plug-ins/1.10.10/i18n/French.json"
            },
            "columnDefs": [
                { "visible": false, "targets": 1 }
            ],
            "order": [[ 1, 'asc' ]],
            "drawCallback": function ( settings ) {
                var api = this.api();
                var rows = api.rows( {page:'current'} ).nodes();
                var last=null;
                api.column(1, {page:'current'} ).data().each( function ( group, i ) {
                    if ( last !== group ) {
                        $(rows).eq( i ).before(
                            '<tr class="group"><td colspan="10">'+group+'</td></tr>'
                        );
                        last = group;
                    }
                } );
            }
        } );
    
    } );
    

    EDIT: Edited code output to use Markdown code formating

  • yurispyyurispy Posts: 29Questions: 6Answers: 0

    `$(document).ready(function() {
    var table = $('table.fiche_culture_autre').DataTable({
    "autoFill": false,
    "ordering": true,
    "info": false,
    "paging": false,
    "language": {
    "url": "//cdn.datatables.net/plug-ins/1.10.10/i18n/French.json"
    },
    "columnDefs": [
    { "visible": false, "targets": 1 }
    ],
    "order": [[ 1, 'asc' ]],
    "drawCallback": function ( settings ) {
    var api = this.api();
    var rows = api.rows( {page:'current'} ).nodes();
    var last=null;
    api.column(1, {page:'current'} ).data().each( function ( group, i ) {
    if ( last !== group ) {
    $(rows).eq( i ).before(
    '<tr class="group"><td colspan="10">'+group+'</td></tr>'
    );
    last = group;
    }
    } );
    }
    } );

    } );`

    `$(document).ready(function() {
    var table = $('table.travaux_en_cours').DataTable({
    "autoFill": false,
    "ordering": true,
    "info": false,
    "paging": false,
    "language": {
    "url": "//cdn.datatables.net/plug-ins/1.10.10/i18n/French.json"
    },
    "columnDefs": [
    { "visible": false, "targets": 1 }
    ],
    "order": [[ 1, 'asc' ]],
    "drawCallback": function ( settings ) {
    var api = this.api();
    var rows = api.rows( {page:'current'} ).nodes();
    var last=null;
    api.column(1, {page:'current'} ).data().each( function ( group, i ) {
    if ( last !== group ) {
    $(rows).eq( i ).before(
    '<tr class="group"><td colspan="10">'+group+'</td></tr>'
    );
    last = group;
    }
    } );
    }
    } );

    } );`

  • kthorngrenkthorngren Posts: 21,324Questions: 26Answers: 4,949

    I copied your row grouping code here - changed table 2 to use column 2 just for testing:
    http://live.datatables.net/yovefasa/1/edit

    Still seems to work. Can you build a test case showing the issue?
    How-to-provide-a-test-case

    BTW, you are assigning both tables to the same variable table. table will only reference the API from the second table. Maybe your error is coming from a different place in your code.

    Kevin

  • yurispyyurispy Posts: 29Questions: 6Answers: 0

    There must be something wrong with my code because I used the hold and it works. Thank you

    For table.table I had thought about it, it doesn't change anything by putting table2etc...

  • yurispyyurispy Posts: 29Questions: 6Answers: 0

    Oh, I found it. This is from

        "language": {
        "url": "//cdn.datatables.net/plug-ins/1.10.10/i18n/French.json"
        },
    
    

    As soon as I put it on, my first table doesn't work anymore.

This discussion has been closed.