Как динамически изменить Datatables для нескольких заголовков столбцов, используя ajax и jquery, не обновляя веб-страницу?

Я пытаюсь изменить номер столбца и заголовок в соответствии с возвращаемым значением ajax, в то время как данные таблицы обновляются с помощью плагина Dataquables jquery. Javascript и JQuery код ниже:

$( document ).ready(function() {

   $.ajax({
            type:'POST',
            url: 'readtitle.php', //this php contains the column header
            success:function(re){
            setTitle(re); // this function is used to set column header
            }

    });


   var oTable = $('#table_id').dataTable({
     "bPaginate": false,
     "bProcessing": true,
     "bLengthChange": true,
     "bFilter": true,
  "bRetrieve": true,
     "bInfo": false,
     "bAutoWidth": false,
     "bServerSide": true,
     "sDom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>',
     "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
     "sAjaxSource": './aadata.txt',
     "aoColumnDefs": [
        {"aTargets":[]}
     ]

   }); 
 }

function setTitle(re){
  re = re.substring(0,re.length-1);
  var retitle = re.split(",");  // this retitle can be of length 3 to 6, depends on the data

        $(retitle).each(function(index, element){
           $('#titleh').html(element);
        });
}

Ниже моя HTML-таблица:

<table id="table_id" class="display">
<thead>
    <tr id="titler"><th>Date</th><th>Actual</th>
   <th id="titleh"></th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Row 1 Data 1</td>
        <td>Row 1 Data 2</td>
    </tr>

</tbody>
</table>

Потому что в HTML я установил 3 заголовка. Если возвращаемый заголовок имеет длину 3, он работает нормально. Однако, если длина изменяется, функция (возможно, неправильная):

 $(retitle).each(function(index, element){
           $('#titleh').html(element);
        });

возвращает только последний элемент, в результате чего номер столбца таблицы фиксируется на 3. Я не знаю, как увеличить заголовок столбца с помощью цикла в jQuery.

Я застрял на два дня. Кто-нибудь может мне помочь, пожалуйста!

Большое спасибо!!!

Кэти

Источник

3 ответа

Решение

Я решил этот вопрос, изменив способ инициализации таблицы в HTML вместо изменения настроек в Datatables.

Я сделал следующее: сначала удалите существующую таблицу, а также обертку таблицы!

 $('#table_id').remove();
 $('#table_id_wrapper').remove();

Затем инициализируйте новую таблицу. и установите формат заголовка / тела в соответствии с вашими данными:

 var content = "<table id='table_id' class='display datatable' style='width:100%;'><thead>";
 content +='<tr>';


 re = re.substring(0,re.length-1);
 // alert(re);
 var retitle = re.split(",");
    alert (retitle + 'x');
   var c = retitle.length;
   var atarget = [];
   var stitle = [];
   for(var i=0; i<c; i++){
     atarget[i] = i;
     stitle[i] = retitle[i];
     content += '<td>' +retitle[i]  + '</td>';

   }

  content +=' </tr></thead>';
  content +='<tbody></tbody>'
  content += "</table>";

Затем добавьте свою таблицу к своей веб-странице. Здесь я прикрепил его к моей вкладке:

  $('#tab3').append(content);

Наконец, я инициализировал настройки Datatable, изменив aoColumnDef в соответствии с моими собственными данными. Отмечено, что формат данных должен соответствовать тому, как вы ранее определяли свою таблицу HTML

   var settings = {

     "bPaginate": false,
     "bProcessing": true,
    "bLengthChange": true,
    "bFilter": false,
    "bInfo": false,
    "bAutoWidth":false,
    "bServerSide": true,
    //  "sDom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>',
     "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
     "sAjaxSource": './aadata.txt',
   "aoColumnDefs": [       
     { "aTargets":atarget}
     ]
   };

 $('#table_id').dataTable().fnDestroy();
 $('#table_id').dataTable(settings);
 $('#table_id').dataTable().fnReloadAjax();

Кстати, спасибо @CodingAnt, @JerryDDG все равно за вашу помощь.

Связанный вопрос об изменении заголовка Datatable решается здесь:

Какой правильный формат для изменения столбца Datatables с помощью массива?

Источник

Возможно, вам следует уничтожить старую таблицу и создать новую с новым конфигом.

$(tableSelector)
    .dataTable(dataTable_setting)
    .fnAddData(data);

$.ajax({
    url: ...
    data: ...
    success: function(data) {
        if (columns number changed) {
            $(tableSelector).empty();
            $(tableSelector)
                .dataTable(newDataTable_setting)
                .fnAddData(newData);
        }
    }
})
Источник

Я не слишком уверен в этом, на самом деле ваше требование до сих пор не ясно для меня.

В случае, если это правильно, вам нужно немного настроить в соответствии с вашими требованиями. Его добавление заголовка, если это необходимо.

<script type="text/javascript">

function setTitle(re){

    re = re.substring(0,re.length-1);

    var retitle = re.split(",");  

    //destroy element created  on request
    $('th').each(function(index, element)
    {

          if(index > 2)
          {
            $( this ).remove();
          }

    });


    //For extra header if any

    if(retitle.length > 1)
    {
        for (var i = 1; i <= retitle.length; i++) 
        {
            $('#titler').append('<th></th>');
        };

    }

    var counter     =   0;

    $('th').each(function(index, element)
    {

          if(index > 1)
          {
            $( this ).text(retitle[counter]);
            counter ++;
          }

    });

}


</script>
Источник
Другие вопросы по тегам