0

この例を使用して:http ://www.w3schools.com/php/php_ajax_database.asp データベースからエコーするテーブルを設定しました。

テーブルでdatatablesプラグインを開始しようとしています。すべてが正しく設定されていますが、機能しません。htmlページとphpページでデータテーブルを開始しようとしましたが、どちらも機能していないようです。

私は同様にこの例を組み込んで同じ問題を抱えています:http: //davidwalsh.name/animated-ajax-jquery

ページがxmlhttp.openおよびxmlhttp.send()の前にすでにロードされているため、問題の原因となっているのは最初の例のこのビットですか。送信されます。

 xmlhttp.open("GET","getuser.php?username="+username+"&year="+str,true);
 xmlhttp.send();

        $(document).ready(function() {
      $('a.delete').click(function(e) {
        e.preventDefault();
        var parent = $(this).parent();
        $.ajax({
          type: 'get',
          url: 'jquery-record-delete.php',
          data: 'ajax=1&delete=' + parent.attr('id').replace('record-',''),
          beforeSend: function() {
            parent.animate({'backgroundColor':'#fb6c6c'},300);
          },
          success: function() {
            parent.slideUp(300,function() {
              parent.remove();
            });
          }
        });
      });
    });

        jQuery( function( $ ) {// Implements the dataTables plugin on the HTML table
var $adtTable= $("#academic_days_table").dataTable({
        "iDisplayLength": 30,       
        "sDom": '<"clear">t>',
        "aaSortingFixed": [[0,'asc']],
        "aoColumns": [
            { "bSortable": false },
            { "bSortable": false },
            { "bSortable": false },
            { "bSortable": false }
            ]
});

    });

HTMLページ

 function showUser(str, username)
 {
 if (str=="")
   {
   document.getElementById("department_logs_txtHint").innerHTML="";
   return;
   } 
 if (window.XMLHttpRequest)
   {// code for IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp=new XMLHttpRequest();
   }
 else
   {// code for IE6, IE5
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
 xmlhttp.onreadystatechange=function()
   {
   if (xmlhttp.readyState==4 && xmlhttp.status==200)
     {
     document.getElementById("department_logs_txtHint").innerHTML=xmlhttp.responseText;
     }
   }
 xmlhttp.open("GET","getuser.php?username="+username+"&year="+str,true);
 xmlhttp.send();
 } 

<form>
    <select id="employee_user">
    <option value="">--</option>  
</select>

<select id="they" onchange="showUser(this.value, employee_user.value)">
<option value="">--</option>

    </select>
</form>

phpページ

<?php
include_once("scripts/connection.php");

$year = $_GET["year"];
$username = $_GET["username"];

$is_academic_result = mysql_query('SELECT * FROM holiday_entitlement_academic WHERE employee = \'' . $username . '\' AND academic_year = \'' . $year . '\' ');

if($is_academic = mysql_fetch_array($is_academic_result)) {

echo'<div style="float:left; width:400px;">';

echo'<table width="100%">
<tr>
<td><strong>Name:</strong></td>
<td>'.$is_academic['employee'].'</td>
</tr>
<tr>
<td><strong>Entitlement:</strong></td>
<td>'.$is_academic['entitlement'].' '.$is_academic['units'].'</td>
</tr>
<tr>
<td><strong>Department / Division:</strong></td>
<td>'.$is_academic['division'].'</td>
</tr>
<tr>
<td><strong>Line Manager:</strong></td>
<td>'.$is_academic['line_manager'].'</td>
</tr>
</table>';
echo'<br/>';

echo'</div>';


echo'<table class="dataTable" id="academic_days_table" cellpadding="2" cellspacing="2" width="100%">
<thead>
<th>Start Date</th>
<th>End Date</th>
<th>'.$is_academic['units'].' to be taken</th>
<th>'.$is_academic['units'].' remaining</th>
<th></th>
</thead>';

echo '<tr>';

echo '<td>-</td>';
echo '<td>-</td>';
echo '<td>-</td>';
echo '<td>'.$is_academic['entitlement'].'</td>';
echo '<td></td>';

echo '</tr>';


$input = $is_academic['entitlement'];
}

else {echo 'You currently dont have a record for this academic year. ';}


//$requests_result = mysql_query('
//SELECT * 
//FROM holiday_entitlement_business_manual
//LEFT JOIN requests ON holiday_entitlement_business_manual.employee = requests.employee
//WHERE employee = \'' . $username . '\' AND academic_year = \'' . $acyear . '\' ');


$requests_result = mysql_query('SELECT * FROM requests WHERE employee = \'' . $username . '\' AND approved = 1 AND academic_year = \'' . $year . '\' ORDER BY start_date ASC');

$remainder = 0;

while($requests = mysql_fetch_array($requests_result)) {

$remainder = ($remainder == 0) ? $input : $remainder;
$out = $remainder - $requests['days'];
if($out < 0){
      break;
}
$remainder = $out;


echo'<tr>';
echo'<td>'.$requests['start_date'].'</td>';
echo'<td>'.$requests['end_date'].'</td>';
echo'<td>'.$requests['days'].'</td>';
echo'<td>'.$remainder.'</td>';
echo'<td><a href="?delete='.$requests['id'].'" class="delete"><img src="images/cross.png"></a></td>';
echo'</tr>';
}

echo'</table>';

?>
4

1 に答える 1

0

スクリプトをxmlhttp.onreadystatechange=function()に含めます

これでDatatablesが読み込まれ、$('a.delete')。click(function(e){}が機能しています

次に例を示します。

 function showUser(str, username)
 {
 if (str=="")
   {
   document.getElementById("department_logs_txtHint").innerHTML="";
   return;
   } 
 if (window.XMLHttpRequest)
   {// code for IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp=new XMLHttpRequest();
   }
 else
   {// code for IE6, IE5
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
 xmlhttp.onreadystatechange=function()
   {
   if (xmlhttp.readyState==4 && xmlhttp.status==200)
     {           
     document.getElementById("department_logs_txtHint").innerHTML=xmlhttp.responseText;
     $('#business_days_table').dataTable({
        "iDisplayLength": 30,       
        "sDom": '<"clear">t>',
        "aaSortingFixed": [[0,'asc']],
        "aoColumns": [
            { "bSortable": false },
            { "bSortable": false },
            { "bSortable": false },
            { "bSortable": false },
            { "bSortable": false }
            ]
     });    
     $('#academic_days_table').dataTable({
        "iDisplayLength": 30,       
        "sDom": '<"clear">t>',
        "aaSortingFixed": [[0,'asc']],
        "aoColumns": [
            { "bSortable": false },
            { "bSortable": false },
            { "bSortable": false },
            { "bSortable": false },
            { "bSortable": false }
            ]
     });
  $('a.delete').click(function(e) {
    e.preventDefault();
    var parent = $(this).parent();
    $.ajax({
      type: 'get',
      url: 'getuser.php',
      data: 'ajax=1&delete=' + parent.attr('id').replace('record-',''),
      beforeSend: function() {
        parent.animate({'backgroundColor':'#fb6c6c'},300);
      },
      success: function() {
        parent.slideUp(300,function() {
          parent.remove();
        });
      }
    });
  });

     }
   }

 xmlhttp.open("GET","getuser.php?username="+username+"&year="+str,true);
 xmlhttp.send();
 } 
于 2012-08-21T15:51:15.347 に答える