headerCells[i] is undefined

jemz

I got problem in searching using server side

I have problem on this error headerCells[i] is undefined if no records find I get this error.but I have no problem if there is record found there is no error...why is it if there is no record I get this error.

I hope someone can help me on this.

Thank you in advance.

     $('#search').on('keyup',function(e) {
              name = $(this).val();
                searchtable =  $('#searchlist').DataTable();
            
                 getList(name);



              });

    function  getList(name){

       $('#searchlist').dataTable({
                "autoWidth":true,
                "searching":false,
                "processing": true,
                "serverSide": true,
                "start": 0,
                "destroy":true,

                "ajax": "../getallList.php?"+'&searchname='+name,
                "deferRender": true,
                "columns": [
                    { "data": "id"},
                    { "data": "FullName"},
                    { "data": "category"},
                    { "data": "gender"},
                    { "data": "email"},
                    { "data": "date"}


                ],"columnDefs": [ {
                    "visible": false, "targets": 0
                }
                ]



            });


   }

 <input type="text" class="form-control" id="search" >
    <table id="searchlist" class="display table table-bordered table-hover" cellspacing="0" width="100%">
                        <thead>
                        <tr>
                            <th>id</th>
                            <th>Name</th>
                            <th>Category</th>
                            <th>Gender</th>
                            <th>Email</th>
                            <th>Date</th>

                        </tr>
                        </thead>
                    </table>

allan

Not sure I'm afraid. Can you link to the page in question (as required in the forum rules) so we can debug it and offer some help?

Allan

jemz

Hi allan,
I already sent you my url.
please help me.

Thank you in advance.

allan

Thank you for PM'ing me the link.

edit - what I said before is nonsense. I need to spend some time debugging this unfortunately. I'm not sure when I'll get a chance. Hopefully later today, but can't promise that.
Allan

jemz

Okay allan I'll just wait,one thing that I found out that if I will search a name example sheila,then I will just type she,so the data datables populated data which match with she in my table,when i click the row in the datables. this is the error

`
TypeError: ctx[0].aoData[this[0]] is undefined

 ctx[0].aoData[ this[0] ]._aData :

`

but if I will continue to type sheila in the searchbox,I can click the datables row without an error.

allan

Okay - I think I see the problem. It only occurs if you type quickly, which indicates that it is the overlapping Ajax returns that is causing the issue.

I would very strongly recommend that you don't use the destroy option (indeed, as the documentation for it notes, using the API is usually preferable).

What I would suggest you do is use the ajax.data option to read the value from the search box and send it to the server:

ajax: {
  url: "../process/process.php?process=getMemberSearch",
  data: function ( d ) {
    d.searchname = $('#search').val();
  }
}

Then you simply need to call draw() (since you are using server-side processing) to reload the table with the new search data. No need to destroy the table, which is very inefficient.

Allan

jemz

Hi allan,

Thank you for the quick reply, I did not change anything only your suggestion,but I am confuse where should I call the draw() in the last part of my code?.

Thank you in advance.

`

       function getMemberName(){
              $('#searchmember').dataTable({
               "autoWidth":true,
              "searching":false,
               "processing": true,
            "serverSide": true,
            "start": 0,
            "ajax": {
                url:"../process/process.php?process=getMemberSearch",
                data: function(d){
                    d.searchname = $('#search').val();
                }
            },
            "deferRender": true,
            "columns": [
                { "data": "memberid"},
                { "data": "FullName"},
                { "data": "memcat"},
                { "data": "gender"},
                { "data": "email"},
                { "data": "registerdate"}


            ],"columnDefs": [ {
                "visible": false, "targets": 0
            }
            ]

        });

      var stable =  $('#searchmember').DataTable();

       stable.draw();
    }

`

jemz

I get this error ,If I do that code,I'm just confuse where to add the .draw()
`
Cannot reinitialise DataTable

`

Thank you in advance.

jemz

Hello allan, can you help me please, I was not able to get on how to put the draw() in my code.it takes 4 hours debugging still I could not get.

Thank you in advance.

allan

Use:

function getMemberName(){
  $('#searchmember').DataTable().draw();
}

Allan

jemz

HI allan,
Thank you so much,no error now in searching,but there is another problem rises,in clicking the row.it will generate this error

`
TypeError: ctx[0].aoData[this[0]] is undefined

    ctx[0].aoData[ this[0] ]._aData :

`

if you will only type the word she for sheila,then click the populated row,it will produce error.

this is how I click the row.

`

      $(function(){
          $('#searchmember tbody').on('click','tr',function() {
           console.log($('#searchmember').DataTable().row().data());

          });

      });

`

Please see my link.

Thank you in advance

jemz

Hello allan,

I solve it now thank you so much. :)