1

我正在尝试使用 jquery ajax 从 php 文件中获取数据。此 php 文件打印由 db 查询生成的表。一旦表格返回到 html 页面，我想将 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>
4

2 回答 2

1

在您的 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();
    }
  });

编辑由于您的更新

您需要更改“EVENT LISTENER FOR CLICKS”来调用应用数据表的函数。改变：

$.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-06T12:55:32.660 回答
0

您应该将 .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()
    }

否则，您正在尝试转换 DOM 中尚不存在的表

于 2012-04-06T12:55:01.133 回答