如何使用ajax和jquery动态更改Datatables多个列

如何使用ajax和jquery动态更改Datatables多个列

本文介绍了如何使用ajax和jquery动态更改Datatables多个列标题而不刷新网页?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在根据ajax的返回值更改列号和标题,而使用DataTables jquery插件更新表数据。 Javascript和jQuery代码如下:

  $(document).ready(function(){

$ .ajax({
type:'POST',
url:'readtitle.php',//这个php包含列标题
success:function(re){
setTitle (re); //此函数用于设置列标题
}

});


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><bottomiflp<clear>>',
aLengthMenu:[[10,25,50,-1],[10, 50,All]],
sAjaxSource:'./aadata.txt',
aoColumnDefs:[
{aTargets:[]}
]

});
}

fu nct setTitle(re){
re = re.substring(0,re.length-1);
var retitle = re.split(,); //这个retitle可以长度为3到6,取决于数据

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

以下是我的HTML表:

 < table id =table_idclass =display> 
< thead>
< tr id =titler>< th>日期< / th>< th>实际< / th>
< th id =titleh>< / th>
< / tr>
< / thead>
< tbody>
< tr>
< td>行1数据1< / td>
< td>行1数据2< / td>
< / tr>

< / tbody>
< / table>

因为在HTML中,我设置了3个标题。如果返回标题长度为3,则可以正常工作。然而,如果长度变化,函数(可能是错误的):

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

只返回最后一个元素,这使得表列号固定为3.我不知道如何使用jQuery中的循环增加列标题。



我已经停了两天。任何人都可以帮助我吗?



非常感谢!!!



凯蒂

解决方案

我通过改变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 = []; (var i = 0; i atarget [i] = i;

stitle [i] = retitle [i];
content + ='< td>'+ retitle [i] +'< / td>';

}

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

然后,将表添加到您的网页。这里我把它附加到我的标签:

  $('#tab3')。append(content) 

最后,我通过根据我自己的数据更改aoColumnDef来初始化Datatable设置。注意到数据格式必须符合您之前定义HTML表格的方式。

  var settings = {

bPaginate:false,
bProcessing:true,
bLengthChange:true,
bFilter:false,
bInfo:false,
bAutoWidth:false,
bServerSide:true,
//sDom:'<topiflp<clear>>><bottomiflp&清除>,
aLengthMenu:[[10,25,50,-1],[10,25,50,全部]],
sAjaxSource ./aadata.txt',
aoColumnDefs:[
{aTargets:atarget}
]
};

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

顺便说一下,谢谢@CodingAnt,@JerryDDG都是一样的帮助。 >

有关更改Datatable标题的相关问题在此解决:




I am trying to change the column number and header according to the return value of ajax, while the table data is updated using DataTables jquery plugin. Javascript and jQuery Code below:

$( 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);
        });
}

Below is my HTML-table:

<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>

Because in the HTML, I set 3 header. If the return header is of length 3, it works fine. However, if the length changes, the function (possibly wrong):

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

only returns the last element, which makes the table column number fixed to 3. I don't know how to increase the column header using a loop in jQuery.

I haven been stuck for two days. Can anyone please help me?

Many thanks!!!

Katie

解决方案

I solved the question by changing the way of initialising table in HTML instead of altering the settings in Datatables.

What I did is: first, remove the existing table, as well as the table wrapper!

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

Then initialise a new table. and set the format of header/body according to your data:

 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>";

Then, append your table to your webpage. Here I attached it to my tab:

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

Finally, I initialised the Datatable settings by changing the aoColumnDef according to my own data. Noted that the data format must match the way you previously define your HTML table

   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();

By the way, thank you @CodingAnt, @JerryDDG all the same for your help.

A related question about changing the Datatable title is solved here:

What is the right format to change Datatables column using array?

这篇关于如何使用ajax和jquery动态更改Datatables多个列标题而不刷新网页?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-06 13:42