My Table element is being removed After Datatable is applied and because of that I am getting erroes

chandram97

I am trying to get the data from Ajax request, Once I get the data I am trying to build the datatable with the data i got from AJAX. I using Async as False.

My Issue is When I apply Datatable to the Table tag with id=contacttable, my table element is removed and because of which I am getting errors like

*Cannot read property 'style' of undefined
*Cannot read property 'adataSort' of undefined
*DataTables warning: table id={id} - Requested unknown parameter '{parameter}' for row {row-index}, column{column-index}`

etc etc...

Below is my JS and HTML code

$('#submit').click(function(){
        var id1= $('#id1').val();
        var id2= $('#id2').val();
        var id3= $('#id3').val();
        var data = Array(); 
        $.ajax({
                url: '<?php echo base_url();?>xxxx/abcd',
                cache: false,
                async:false,
                type: "post",
                data: { id1: id1, id2: id2, id3: id3},
                success: function(res){                                             
                    if(res != '') {
                        data = res;                             
                        
                    }
                }               
        });
        var table = $('#contacttable').DataTable( {
            "data": data,
            scrollY:        250,
            deferRender:    true,
            scroller:       true,
            "columns": [
                {
                    "class":          'details-control',
                    "orderable":      false,
                    "data":           null,
                    "defaultContent": ''
                },
                { "data": "value1" },
                { "data": "value2" },
                { "data": "value3" },
                { "data": "value4" },
                { "data": "value5" },
                { "data": "value6" },
                { "data": "value7" },
                         
            ],
            "order": [[1, 'asc']]
        } );    
        
    });

<div class="panel-body listtd scroll">
   <table id="contacttable" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>S.NO</th>
                <th>v1</th>
                <th>v2</th>
                <th>v3</th>
                <th>v4</th>
                <th>v5</th>
                <th>v6</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>S.NO</th>
                  <th>v1</th>
                <th>v2</th>
                <th>v3</th>
                <th>v4</th>
                <th>v5</th>
                <th>v6</th>
            </tr>
        </tfoot>
    </table>
    <div class="loader"></div>

</div>

chandram97

My Table Element is Surrounded by Divs and Table is not having ID that I have given, its been replaced. Can you please help me ASAP

bindrid

why are you using async false? That pisses off users when you lock up their browsers waiting for a response. Also, using this has been deprecated in jquery 1.8 and above.

If your javascript is in a separate include, your url will not work.

Are you actually making it to the server and the server returning data?

chandram97

Regarding Async

1. How can I make datatable script to wait until my AJAX is executed

2. I tried using datatables Ajax also, but that also Giving errors similar to it,

For datatables Ajax do we need to do anything at server Side code, Or can I use it as plan PHP code.

Are you actually making it to the server and the server returning data?
- Yes I am getting data from Server

kthorngren

*Cannot read property 'style' of undefined

This is due to defining 7 columns in your table and 8 columns in your Datatables. The error happens when Datatables tries to configure the 8th column that is not there.

*Cannot read property 'adataSort' of undefined

Haven't seen this before but its probably due to the data not being added to the table or the missing 8th column.

*DataTables warning: table id={id} - Requested unknown parameter '{parameter}' for row {row-index}, column{column-index}`

The data from the server is not matching up to the columns config. The first step is to follow the technote for this error:
https://datatables.net/manual/tech-notes/4

I'm not sure what the data looks like that is returned from ajax but it needs to match the format defined in the columns config. This [page[(https://datatables.net/manual/data/) will describe the data formats.

If you still have questions we need to see the data returned to help further. Additionally you could get debugger output.

Kevin

bindrid

Do you know how to use the "debugger" command and built in debuggers that most browsers have? For example, run Chrome or IE and press your F12 key and see what happens.

kthorngren

Maybe this page will help?
https://datatables.net/manual/tech-notes/1

The debugger output I was referring to is a bit of code the Datatables developer provides to get info about the web page and Datatables:
https://datatables.net/manual/tech-notes/10#DataTables-debugger

Not sure you really need to invoke the browsers debugger for this issue. We just need to collect some information to help you.

Kevin

bindrid

I would have expected your code to look more like this:

        var table = null;
        // I assume that submit is not an actual submit button but a regular button
        $('#submit').click(function(){

            var id1= $('#id1').val();
            var id2= $('#id2').val();
            var id3= $('#id3').val();

            $.ajax({
                url: 'xxxx/abcd',
                type: "post",
                data: JSON.stringify({ id1: id1, id2: id2, id3: id3}),
                dataType:"json",
                contentType: "application/json; charset=utf-8",
                success: function(res){ 
                    
                    // make sure this is a JSON object. 
                    // If it is a string and not an object you need to deserialized it.
                    // different server side and client side setups determines this.
                    console.log(res);
                    if(res != '') {
                        setupTable(res);                       
                    }
                } ,
                error: function (err, status){
                    debugger;
                    console.log(err);
                 }
            });
        });

        function setupTable(requestData) {
             table = $('#contacttable').DataTable( {
                "data": requestData,
                scrollY:        250,
                deferRender:    true,
                scroller:       true,
                "columns": [
                    {
                        "class":          'details-control',
                        "orderable":      false,
                        "data":           null,
                        "defaultContent": ''
                    },
                    { "data": "value1" },
                    { "data": "value2" },
                    { "data": "value3" },
                    { "data": "value4" },
                    { "data": "value5" },
                    { "data": "value6" },
                    { "data": "value7" },
                          
                ],
                "order": [[1, 'asc']]
            } );    
        }

bindrid

ignore that <br> at the top, not sure where that came from