Datatable header height keep increasing

Luqman305

Hi.

I need help with my Datatable. I have a server side-processing datatable and all is working well. This datatable will show data based on search function using Ajax. My problem is whenever I click on search button that will trigger the search function, the table header will keep increasing.. Please help. Thank you..

//HTML

 <div class="ibox-content">
                            <div class="table-responsive">
                              <!-- <div class="container" style="margin-top:35px;"> -->
                                <div style="height: 200px;">
                              <table id="search_table" style="width: 100%" cellpadding="0" cellspacing="0" border="0" class="display">
                              <thead>
                                <tr>
                                  <th>User ID</th>
                                  <th>Display ID</th>
                                  <th>Email</th>
                                  <th>First name</th>
                                  <th>Display Name</th>
                                  <th>Active</th>
                                  <th>Age</th>
                                  <th>City</th>
                                  <th>Phone Number</th>
                                  <th>Type</th>
                                  <th>Created on</th>
                                  <th>Last activity</th>
                                  <!-- <th>Action</th> -->
                                </tr>
                              </thead>
                            </table>
                            </div>
                          </div>
                        </div>

//AJAX/JAVASCRIPT

```
/* Create Table */
function createTablerow(data){

   $('#search_table').DataTable({

        destroy:true,//elakkan dari error initialise
         language: {
                      "emptyTable":     "Tiada Maklumat Dijumpai!"
                    },

        paging: true,
        searching: true,
        deferRender: true,
        data : data,
        order : [[11,"desc"]],
          "columnDefs": [
        {
            "targets": [ 0 ],
            "visible": false,
            "searchable": false
        },
    ],//hidekan userID
        "columns" : [
                    { "data": "u_id" },
                    { "data": "u_displayid" },
                    { "data": "u_email",
                        "render": function ( data, type, JsonResultRow, meta ) {
                          // var u_id = JsonResultRow['u_id'];
                          var u_displayid = JsonResultRow['u_displayid'];
                          var u_email = JsonResultRow['u_email'];
                          // console.log(JsonResultRow);
                          return '<a href="manage_user.php?action=edit&u_id='+u_displayid+'" target="_blank">'+u_email+'</a>'

                          // return '<a href="manage_user.php?u_id='+u_displayid+'" onclick="Loadprofile();return false;">'+u_email+'</a>'
                        }
                     },
                    { "data": "ud_first_name" },
                    { "data": "u_displayname" },
                    { "data": "u_status" },
                    { "data": "ud_dob" },
                    { "data": "ud_city" },
                    { "data": "ud_phone_number" },
                    { "data": "u_role" },
                    { "data": "u_create_date" },
                    { "data": "u_modified_date" }
               ]

      });

    }

```

kthorngren

I don't see where you are using serverSide processing nor have the ajax option configured for your Datatable. How are you adding/updating the table data? Looks like its outside of Datatables functionality. I would start looking there.

Kevin

Luqman305

function cariTutor(){

var search_user = $("#search_user").val();

        var search_id = $("#u_id").val();
    var istutor = document.getElementById("is_tutor").value;//dapatkan value dari dropdown html
    var search_email = $("#u_email").val();//dapat je kt fetchurlmanageuser
    var search_first_name = $("#ud_first_name").val();//dapat je kt fetchurlmanageuser
    var search_last_name = $("#ud_last_name").val();//dapat je kt fetchurlmanageuser
    var search_display_name = $("#u_displayname").val();//dapat je kt fetchurlmanageuser
    var search_phone_number = $("#ud_phone_number").val();//dapat je kt fetchurlmanageuser
    // kalau yes

    var gender = $("#u_gender").val();
    var ud_race = $("#ud_race").val();
    var ud_tutor_status = $("#ud_tutor_status").val();
    var current_occupation = $("#ud_current_occupation").val();
    var areas = $("#state_drop").val();//cover_area_State dapat number
    var location = $("#location").val();//cover_area_State dapat number
    // var areas = document.getElementById("cover_area_state").value;
    var course = $("#level_drop").val();//tutor_course
    // var subject_check = $('.subject_check:checked').val();//dapat value subject dalam course

 var subject_check = [];
        $('.subject_check:checked').each(function(i){
          subject_check[i] = $(this).val();
        });


    // var city_check = $('.city_check:checked').val();//dapat value subject dalam areas

    var city_check = [];
        $('.city_check:checked').each(function(i){
          city_check[i] = $(this).val();
        });

    var subject = $("#subject").val();//tutor_course
    var tution_center = $("#tution_center").val();
    var u_admin_approve = $("#u_admin_approve").val();

 // kalau no

    var client_status = $("#ud_client_status").val();
    // var u_role = document.getElementById("u_role").value;
    // var ud_state = $("#ud_state").val();
    var messagecheckbox = $('.messagecheckbox:checked').val();      //TAK HANTAR VALUE LAGI
    // alert(messagecheckbox);
    // alert(areas + ',' + city_check + ',' + course + ',' + subject_check);

    if(istutor =="Yes"){
      $.ajax({
        method:"POST",
        url:"classes/fetchurlmanageuser.php",
        dataType:"json",
        data:{
          is_tutor:istutor,
          data: {
            is_tutor:istutor,
            u_email:search_email,
            ud_first_name:search_first_name,
            ud_last_name:search_last_name,
            u_displayname:search_display_name,
            ud_phone_number:search_phone_number,
            u_gender:gender,
            ud_race:ud_race,
            ud_tutor_status:ud_tutor_status,
            ud_current_occupation:current_occupation,
            state_drop:areas,
            location:location,
            level_drop:course,
            subject_check: subject_check,
            city_check:city_check,
            subject:subject,

            tution_center:tution_center,
            u_admin_approve:u_admin_approve,
            rowperpage:rowperpage,
          },
          functionname:'isTutor'

        },
        success:function(response){
          // alert(response);
             createTablerow(response);
             console.log(response);
             // return false;

             // document.getElementById("filter_user").reset();//kalau guna ni, bile kt table tekan next dye xkua id sama
             // document.getElementById("cover_area_State").reset();//kalau guna ni, bile kt table tekan next dye xkua id sama

        }
      });

    }else if(istutor == "No"){
       $.ajax({
        method:"POST",
        url:"classes/fetchurlmanageuser.php",
        dataType:"json",
        data:{
          is_tutor:istutor,
          data: {
            is_tutor:istutor,
            u_email:search_email,
            ud_first_name:search_first_name,
            ud_last_name:search_last_name,
            ud_phone_number:search_phone_number,
            u_gender:gender,
            ud_client_status:client_status,
            messagecheckbox:messagecheckbox,
            // u_role:search_role,
            // ud_state:ud_state,
          },
          functionname:'isTutor'
          // rowperpage:rowperpage

        },
        success:function(response){
          // alert(response);
             createTablerow(response);
             console.log(response);
             // return false;  //prevent dari table tak load search baru
             // document.getElementById("filter_user").reset();
        }
      });

    }else if (istutor == "All") {
      $.ajax({
        method:"POST",
        url:"classes/fetchurlmanageuser.php",
        dataType:"json",
        data:{
          is_tutor:istutor,
          data: {
            is_tutor:istutor,
            u_email:search_email,
            ud_first_name:search_first_name,
            ud_last_name:search_last_name,
            ud_phone_number:search_phone_number,
          },
          functionname:'isTutor'
          // rowid:rowid,
          // rowperpage:rowperpage
        },
        success:function(response){
          // alert(response);
             createTablerow(response);
             console.log(response);
             // return false;  //prevent dari table tak load search baru
             // document.getElementById("filter_user").reset();
        }
      });
    }
    return false;
  }

/* Create Table */
   function createTablerow(data){


       $('#search_table').DataTable({
            
            destroy:true,//elakkan dari error initialise
             language: {
                          "emptyTable":     "Tiada Maklumat Dijumpai!"
                        },
              
            paging: true,
            autoHeight: false,
            searching: true,
            deferRender: true,
            data : data,
            order : [[11,"desc"]],

            

              "columnDefs": [
            {
                "targets": [ 0 ],
                "visible": false,
                "searchable": false
            },
        ],//hidekan userID
            "columns" : [
                        { "data": "u_id" },
                        { "data": "u_displayid" },
                        { "data": "u_email",
                            "render": function ( data, type, JsonResultRow, meta ) {
                              // var u_id = JsonResultRow['u_id'];
                              var u_displayid = JsonResultRow['u_displayid'];
                              var u_email = JsonResultRow['u_email'];
                              // console.log(JsonResultRow);
                              return '<a href="manage_user.php?action=edit&u_id='+u_displayid+'" target="_blank">'+u_email+'</a>'

                              // return '<a href="manage_user.php?u_id='+u_displayid+'" onclick="Loadprofile();return false;">'+u_email+'</a>'
                            }
                         },
                        { "data": "ud_first_name" },
                        { "data": "u_displayname" },
                        { "data": "u_status" },
                        { "data": "ud_dob" },
                        { "data": "ud_city" },
                        { "data": "ud_phone_number" },
                        { "data": "u_role" },
                        { "data": "u_create_date" },
                        { "data": "u_modified_date" }
                   ]

          });

        }

Luqman305

hi thank you for your reply.Here is how I use the server side processing. My problem is the header heights keep increasing when I click on the search button.

allan

We'd need a link to a page showing the issue please.

Also I don't see serverSide being used there either, but I think we'd need the test case to get anywhere with the styling issue.

Allan