jquery ajax和datatables的问题

我想用jquery ajax从php文件中获取数据。这个php文件打印出一个由db查询制成的表格。一旦表格返回到html页面，我想将数据表样式应用于表格，但这不起作用。jquery ajax和datatables的问题

也许我应该只使用数据表ajax功能，而不是jQuery ajax。我只有三个链接，用户可以点击来调用ajax，并不是所有链接都返回一个打印的表格。

我怀疑它是因为javascript的时机，所有js在表输出之前加载。

我试过使用jquery.on（），但无法让它与数据表一起工作。

我很感激任何帮助。对不起，如果这是令人困惑。

<script type="text/javascript">  
$(document).ready(function() { 

// EVENT LISTENER FOR CLICKS 
var option_action = "fridge"; 
var using = "pantry"; 
$.post("./backend.php", { option: option_action, action: using }, function(data) { 
$("#content").html(data); 
load_table(); 
}); 
// EVENT LISTENER FOR CLICKS 
$(".pantry_menu li").click(function() { 
    alert("CLICK"); 
//getting data from the html 
var option_action = $(this).attr("name"); 
var using = "pantry"; 
$.post("./backend.php", { option: option_action, action: using }, function(data) {  
    $("#content").html(data); 
}); 
return false; 
}); 

//Mouse action listeners for side bar 
$(".pantry_menu li").mouseover(function() { 
    $(this).css("border-bottom" , "2px solid black"); 
}); 
$(".pantry_menu li").mouseout(function() { 
    $(this).css("border-bottom" , "2px dotted black"); 
}); 
$(".fridge_table1").change(function(){ 
    alert("CHANGE"); 
}); 
}); 

function load_table() 
{ 
    $('.fridge_table1').dataTable({ 
     "aaSorting": [[ 4, "desc" ]] 
     ,"bJQueryUI": true 
    }); 
} 
</script>

来源

2012-04-06 Travis Emery

一些代码，看看可以帮助 – fcalderan 2012-04-06 12:53:06

请张贴一些代码 – nandu 2012-04-06 12:54:56

我已经加入到我的答案，你发布的代码。 – psynnott 2012-04-06 13:05:34

还不存在在您的ajax成功函数中，您可以将dataTable重新应用到表中。例如：

$.ajax({ 
    type: "POST", 
    url: "ajax.php", 
    data: { 
     request: 'something' 
    }, 
    async: false, 
    success: function(output) 
    { 
     $('#myTableDiv').html(output); //the table is put on screen 
     $('#myTable').dataTable(); 
    } 
    });

编辑因您的更新

您需要更改“事件侦听器的点击次数”来称呼你的函数应用于数据表。变化：

$.post("./backend.php", { option: option_action, action: using }, function(data) {  
    $("#content").html(data); 
});

到

$.post("./backend.php", { option: option_action, action: using }, function(data) {  
    $("#content").html(data); 
    load_table(); 
});

来源

2012-04-06 12:55:32 psynnott

它工作！令人惊讶的是，一直在为此奋斗了几天。谢谢一堆。 – 2012-04-06 13:09:58

不用担心。你也可以重构你的代码来删除代码重复:) – psynnott 2012-04-06 13:11:41

你应该把.dataTables（）在你的Ajax功能的回调部分

$.ajax{ 
    url: yoururl, 
    ... 
    success: function(data){ 
     //append the table to the DOm 
     $('#result').html(data.table) 
     //call datatables on the new table 
     $('#newtable').dataTables() 
    }

否则你试图TRANSFORMA表不会在DOM

来源

2012-04-06 12:55:01

注意，要将dataTables应用到表中，它是$（'＃tableID'）。dataTable（）（no's'）。 – psynnott 2012-04-06 13:03:07

jquery ajax和datatables的问题

回答

相关问题