1

jqueryajaxを使用してphpファイルからデータを取得しようとしています。このphpファイルは、dbクエリから作成されたテーブルを出力します。テーブルがhtmlページに戻ったら、データテーブルのスタイルをテーブルに適用したかったのですが、これは機能しません。

jquery ajaxではなく、datatablesajax機能を使用する必要があるかもしれません。ユーザーがajaxを呼び出すためにクリックできるリンクが3つありますが、すべてのリンクが印刷されたテーブルを返すわけではありません。

テーブルが出力される前にすべてのjsが読み込まれるjavascriptのタイミングが原因だと思います。

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

更新による編集

dataTables を適用する関数を呼び出すには、「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

ajax 関数のコールバックに .dataTables() 部分を配置する必要があります

$.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 に答える