2 Table on 1 Page

2 Table on 1 Page

rafthrafth Posts: 3Questions: 1Answers: 0

I need two table on one page, but the table tabledata_office wont shown the data. My project is using laravel and the route is probably totally fine because I have try just one table on one page each table and the data is available. But i cant show the data if there is two table on one page. I have no clue about my mistakes. Im new here :)

Thanks before for helping o:)

Error messages shown:
DataTables warning: table id=tabledata_office - Requested unknown parameter 'name' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4

Source code:

view table 1

                    <div class="table-responsive">
                        <table class="table table-hover table-borderless mg-0" id="tabledata_address">
                            <thead>
                                <tr class="tx-10 tx-spacing-1 tx-color-03 tx-uppercase">
                                    <th class="align-middle text-center wd-5p" style="border-bottom: none !important">Name</th>
                                    <th class="align-middle text-center wd-5p" style="border-bottom: none !important"><span class="mg-r-15">Address</span></th>
                                    <th class="align-middle text-center wd-20p" style="border-bottom: none !important"><span class="mg-r-15">Postal code</span></th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>

view table 2

                    <div class="table-responsive">
                        <table class="table table-hover table-borderless mg-0" id="tabledata_office">
                            <thead>
                                <tr class="tx-10 tx-spacing-1 tx-color-03 tx-uppercase">
                                    <th class="align-middle text-center wd-5p" style="border-bottom: none !important">Name</th>
                                    <th class="align-middle text-center wd-5p" style="border-bottom: none !important"><span class="mg-r-15">Position</span></th>
                                    <th class="align-middle text-center wd-20p" style="border-bottom: none !important"><span class="mg-r-15">Office</span></th>
                                    <th class="align-middle text-center wd-10p" style="border-bottom: none !important"><span class="mg-r-15">Salary</span></th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>

Table 1 JS

    <script>
        var initial = {};
        initTable(initial);

        var datatable;
        var datatableUrl = `{{ route('api.address') }}`;

        function initTableAddress(datatableData) {
            datatable = $("#tabledata_address").DataTable({
                dom:    "<'row'<'col-sm-12 col-md-4'l><'col-sm-12 col-md-4'B><'col-sm-12 col-md-4'f>>" +
                        "<'row'<'col-sm-12'rtr>>" +
                        "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
                language: { ... },
                pagingType:     'full_numbers',
                destroy:        true,
                searchDelay:    1000,
                processing:     true,
                order:          [[6, 'asc'],[3,'asc']],
                ajax: {
                    data: datatableData,
                    url: datatableUrl
                },
                columns: [
                    {
                        className: 'align-middle text-center border-bottom',
                        data: 'name',
                        name: 'name',
                    },
                    {
                        className: 'align-middle text-center border-bottom',
                        data: 'address',
                        name: 'address',
                    },
                    {
                        className: 'align-middle border-bottom',
                        data: 'postalcode',
                        name: 'postalcode',
                    },
                  },
                ],
            });
            $('.dataTables_length select').select2({ minimumResultsForSearch: Infinity });
        }

        $('#name').select2({
            theme: 'bootstrap4',
            allowClear: true,
            placeholder :'Select Name',
            language: 'id-ID',
        });

        $('#search-btn').on('click', function(){
            let data = {};
            data['name'] = $('#name').val();

            initTableAddress(data);            
        });
    </script>

table 2 JS

    <script>
        var initial = {};
        initTable(initial);

        var datatable;
        var datatableUrl = `{{ route('api.office') }}`;

        function initTableOffice(datatableData) {
            datatable = $("#tabledata_office").DataTable({
                dom:    "<'row'<'col-sm-12 col-md-4'l><'col-sm-12 col-md-4'B><'col-sm-12 col-md-4'f>>" +
                        "<'row'<'col-sm-12'rtr>>" +
                        "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
                language: { ... },
                pagingType:     'full_numbers',
                destroy:        true,
                searchDelay:    1000,
                processing:     true,
                order:          [[6, 'asc'],[3,'asc']],
                ajax: {
                    data: datatableData,
                    url: datatableUrl
                },
                columns: [
                    {
                        className: 'align-middle text-center border-bottom',
                        data: 'name',
                        name: 'name',
                    },
                    {
                        className: 'align-middle text-center border-bottom',
                        data: 'position',
                        name: 'position',
                    },
                    {
                        className: 'align-middle border-bottom',
                        data: 'office',
                        name: 'office',
                    },
                    {
                        className: 'align-middle border-bottom',
                        data: 'salary',
                        name: 'salary',
                    },
                  },
                ],
            });
            $('.dataTables_length select').select2({ minimumResultsForSearch: Infinity });
        }

        $('#office').select2({
            theme: 'bootstrap4',
            allowClear: true,
            placeholder :'Select Office',
            language: 'id-ID',
        });

        $('#search-btn').on('click', function(){
            let data = {};
            data['office'] = $('#office').val();

            initTableOffice(data);            
        });
    </script>

Answers

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

    Have you followed the steps in the technical notes linked to in the error? That'll be the place to start. If so, what did you find?

    Colin

  • rafthrafth Posts: 3Questions: 1Answers: 0

    I thought the problem isnt like what technical notes said, because if I just have one table on page.. it will show data on the table. probably the problem was on how I read the ajax, but i have no clue right now.
    Rafth

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

    Requested unknown parameter 'name' for row 0, column 0

    That means Datatables can't find the row data. Start by looking at the ajax response by using the troubleshooting steps in the link from the error:
    http://datatables.net/tn/4

    Kevin

  • rafthrafth Posts: 3Questions: 1Answers: 0

    Im sorry for late answer, the first ajax response for dataTables is not much different with second ajax response for the second dataTables. The different is just about the data, and this is the ajax respone for second dataTables :

      ["version":protected]=>
      string(3) "1.0"
      ["statusCode":protected]=>
      int(200)
      ["statusText":protected]=>
      string(2) "OK"
      ["charset":protected]=>
      NULL
      ["original"]=>
      array(5) {
        ["draw"]=>
        int(0)
        ["recordsTotal"]=>
        int(106)
        ["recordsFiltered"]=>
        int(106)
        ["data"]=>
        array(106) {
          [0]=>
          array(4) {
            ["name"]=>
            string(5) "Peter"
            ["position"]=>
            string(3) "CEO"
            ["office"]=>
            string(5) "Carms"
            ["salary"]=>
            string(6) "$ 5000" 
          }
          [1]=>
          array(4) {
            ["name"]=>
            string(7) "Jackson"
            ["position"]=>
            string(10) "Supervisor"
            ["office"]=>
            string(5) "Carms"
            ["salary"]=>
            string(6) "$ 1000" 
          }
    
  • colincolin Posts: 15,240Questions: 1Answers: 2,599
    edited December 2021

    If that's what's being sent, that's not valid Ajax - valid Ajax looks like:

    [{
        "name":    "Tiger Nixon",
        "position":   "System Architect",
        "salary":    "$3,120",
        "start_date": "2011/04/25",
        "office":    "Edinburgh",
        "extn":    "5421"
    }]
    

    Can you confirm what is being received by DataTables, please.

    Colin

Sign In or Register to comment.