Высота заголовка Datatable продолжает увеличиваться

Question

Мне нужна помощь с моим Datatable. У меня есть обработка данных на стороне сервера, и все работает хорошо. Эта таблица данных покажет данные, основанные на функции поиска с использованием Ajax. Моя проблема заключается в том, что всякий раз, когда я нажимаю кнопку поиска, которая запускает функцию поиска, высота заголовка таблицы будет увеличиваться. Пожалуйста, помогите. Спасибо ..

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

      });

    }


 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;

}

Answer 1

Мое первое предположение, это может быть потому, что в вашей таблице отсутствует тег tbody. Для Datatables требуется table, чтобы теги thead и tbody работали должным образом.

Вы указываете строку заголовка в самом HTML-коде, хотя я не думаю, что с этим есть какая-либо проблема, но также может быть причиной вашей проблемы. Посмотрите на приведенный ниже фрагмент кода и посмотрите, работает ли он.

$(function() {
  var data = [{
    u_id: 1,
    u_displayid: 100,
    u_email: "abc",
    ud_first_name: "first",
    u_displayname: "display",
    u_status: "stat",
    ud_dob: "date",
    ud_city: "city",
    ud_phone_number: "phone",
    u_role: "role",
    u_create_date: "create",
    u_modified_date: "modify"
  }];
  $("#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: [{
        title: 'id',
        data: "u_id"
      },
      {
        title: 'display id',
        data: "u_displayid"
      },
      {
        title: 'email',
        data: "u_email"
      },
      {
        title: 'firstname',
        data: "ud_first_name"
      },
      {
        title: 'displayname',
        data: "u_displayname"
      },
      {
        title: 'status',
        data: "u_status"
      },
      {
        title: 'DOB',
        data: "ud_dob"
      },
      {
        title: 'city',
        data: "ud_city"
      },
      {
        title: 'phone',
        data: "ud_phone_number"
      },
      {
        title: 'role',
        data: "u_role"
      },
      {
        title: 'craeted at',
        data: "u_create_date"
      },
      {
        title: 'modified at',
        data: "u_modified_date"
      }
    ]
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>

<table table table-striped" id="search_table" style="width:100%;">
    <thead></thead>                                                                                                         
    <tbody></tbody>                                                              
</table>