Question

我想在ajax请求完成后初始化一个jquery函数并成功获得响应。因为我试图将表作为ajax响应并使用数据表jquery插件将其排序为网格

该函数以这种方式初始化

$(document).ready(function() {
$('#data_grid').dataTable();
    } );

ajax响应成功时将触发的功能

function showgValid()
{
    if(xmlHttp.readyState == 4 || xmlHttp.readyState == "complete")
    {document.getElementById('loadingImg').style.display='none';
    data =xmlHttp.responseText;

    document.getElementById("genPay").innerHTML=data;

    }
}

ajax响应成功后，genPay div的innerHTML将成为响应文本，响应文本将是一个具有id data_table的表。

将发送ajax请求并从以下文件中获取：

 <?

require_once '../config.php';

$db = $_GET['db'];

$table = $_GET['table'];

$_SESSION['table']=$table; 

 ?>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <style type="text/css" title="currentStyle">
            @import "demo_page.css";
            @import "demo_table.css";
        </style>

        <script type="text/javascript" language="javascript" src="jquery.js"></script>
        <script type="text/javascript" language="javascript" src="jquery.dataTables.js"></script>
        <script language ="javascript" src="js/abtAjax.js" type="text/javascript"></script>
        <script type="text/javascript" src="js/ajax.js"></script>
        <script type="text/javascript" charset="utf-8">
            $(document).ready(function() {
                $('#data_grid').dataTable();
            } );



        </script>
    </head>
    <body id="dt_example">
        <div id="container">






<table cellpadding="0" cellspacing="0" border="0" class="display"  id="data_grid">

    <thead><?
    if ( $line == 0 )
    {

?>
<tr>
    <?php
     $sql=mysql_query("show columns from $table");
     while($res = mysql_fetch_row($sql))
     {
     echo "<th bgcolor='".( ( $line % 2 ) ==0 ? '#efefef' : '#ffffff'  )."'>$res[0]</td>";

     }
    ?>
</tr>
<?
}
$line++;
?>
</thead>
    <tbody>
        <?php
$result = mysql_query( "select * from $table" ); 
$num_rows = mysql_num_rows($result); 

while ($get_info = mysql_fetch_object($result)){ 
print "<tr>";
foreach ($get_info as $field) 
print "<td>$field</td>"; 
print "</tr>"; 
} 

?>
    </tbody>
<?
print "</table>"; 
?>


            <div class="spacer"></div>






        </div>
    </body>
</html>

问题在于我没有得到网格预期。我认为该函数没有初始化ajax请求的成功。请纠正我摆脱这个问题

Answer 1

在你的ajax调用之后，

$(document).ready()不会触发。它仅在首次加载页面时触发。如果你希望在ajax调用之后调用$('#data_grid').dataTable();，那么只需从ajax调用的成功处理程序中调用它。

function showgValid()
{
    if(xmlHttp.readyState == 4 || xmlHttp.readyState == "complete")
    {
        document.getElementById('loadingImg').style.display='none';
        data =xmlHttp.responseText;

        document.getElementById("genPay").innerHTML=data;

        // ADD THIS LINE to your ajax success handler
        $('#data_grid').dataTable();
    }
}

Answer 2

我相信这就是你要找的东西：

$.ajax({
  url: "test.html",
  context: document.body,
  success: function(){
    $(this).addClass("done");
  }
});

jQuery API refference

如何在ajax请求的onSuccess上初始化jquery函数？

2 个答案: