2 Table on 1 Page

rafth

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

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>

colin

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

rafth

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

kthorngren

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

rafth

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" 
      }

colin

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