Fatal编程技术网
  • php/
  • Php 在ajax响应上应用表类

Php 在ajax响应上应用表类

php html ajax datatables

Php 在ajax响应上应用表类,php,html,ajax,datatables,Php,Html,Ajax,Datatables,我已经在我的上应用了类，我正在用JSON从AJAX响应创建行。我的问题是，清单中显示了3种不同的无线电选择，但表类并没有应用于插入的行，因此它逃避分页类数据。我怎样才能纠正这个问题？我搜索了很多，问了很多论坛，但都没有结果 任何帮助或建议都将受到欢迎和感谢 <?php include 'blocks/headerInc.php' ; ?> <?php ob_start(); $errmsg =

我已经在我的
上应用了类，我正在用JSON从AJAX响应创建行。我的问题是，清单中显示了3种不同的无线电选择，但表类并没有应用于插入的行，因此它逃避分页类数据。我怎样才能纠正这个问题？我搜索了很多，问了很多论坛，但都没有结果

任何帮助或建议都将受到欢迎和感谢

<?php include 'blocks/headerInc.php' ; ?>
<?php
ob_start();                                 

$errmsg         =   "" ;
$module_id      =   '';
$query          =   '';
$date_from      =   '';
$date_to        =   '';
$status ='';
$check ='';
$disabled='';
$row='';

$sqlQuery = "SELECT * FROM tbl_user WHERE type = 3 AND status = 0 AND registration_type = 0";
?>

<div class="container pagecontainer">
  <!-- Static navbar -->
  <div class="row row-offcanvas row-offcanvas-right">
    <!--/.col-xs-12.col-sm-9-->
    <div class="col-sm-3 col-md-3 sidebar" id="sidebar">
      <div id="left_panel" class="clearfix left">
         <?php include 'blocks/leftnavInc.php' ; ?>
      </div>
    </div>
    <div class="col-xs-12 col-sm-9 page-right">
        <div class="panel panel-primary"> 
            <div class="panel-heading">Candidate Approval</div>
            <div class="panel-body">
                <div class="column col-sm-offset-0">
                    <form id="selection" method="GET" >
                        <input type='radio'  name='users' value='unapproved' checked /> Unapproved Candidates &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type='radio'  name='users' value='approved' /> Approved Candidates &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type='radio' id='show' name='users' value='all'  /> All Candidates &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                        <table id="example" class="table table-striped table-hover table-bordered dataTableReport dt-responsive nowrap"   cellspacing="0" width="100%">           
              <thead>
                <tr>
                  <th>S.No.</th>
                  <th>Email ID</th>
                  <th> Reference ID</th>  
                  <th>Name</th>
                  <th>Mobile No.</th>
                  <th>Registration Date</th>
                  <th>Check for Approval 
                  <input type="checkbox" id="select_all" name="all_check[]" <?php echo $disabled ;?> class="checkbox" value= "<?php //echo $row['id']; ?>"> </th>
                </tr>
              </thead>
              <tbody id=datashow></tbody> 
                        </table> 

                        <input type="submit" name ="all_send" value="Approve" style="display: none; float: right;"  id="one" class="btn btn-success">

                    </form> 
                </div>
            </div>
        </div>
        <!--/row-->
    </div>
    <!--/.sidebar-offcanvas-->
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script>
    $('#selection').change
    (


        function() 
        {

            var selected_value = $("input[name='users']:checked").val();

            $.ajax
            ( 
                {
                    url: "report_ajax.php",
                    type: "POST",
                    cache: false,
                    data: { selected_value : selected_value },

                    success: function(response)
                    {
                         console.log(response);

                            var len = response.length;
                             $("#datashow").empty();
                       for(var i=0; i<len; i++){
                             var id = response[i].id;
                             var email = response[i].email;
                             var employee_id = response[i].employee_id;
                             var first_name = response[i].first_name;
                             var middle_name = response[i].middle_name;
                             var last_name = response[i].last_name;
                             var mobile = response[i].mobile;
                             var created_on = response[i].created_on;
                             var disabled = response[i].disabled;
                             var users = response[i].users;

                var tr_str = 
                    "<tr>" +
                    "<td>" + (i+1) + "</td>" +
                    "<td>" + email + "</td>" +
                    "<td>" + employee_id + "</td>" +
                    "<td>" + first_name + "&nbsp;" + middle_name + "&nbsp;" + last_name + "</td>" +
                    "<td>" + mobile + "</td>" +
                    "<td>" + created_on + "</td>" +
                    "<td><input type='checkbox' name='check[]'"  + disabled +  "value= '"  + id +  "' class='checkbox' id='select_all' ></td>" +
                      "<input type='hidden' value='"  + id +  "' name='user_id' id='user_id' >" +
                    "</tr>" ;


                $("#datashow").append(tr_str);
            }

                    }
                }
            );
        }
    );
</script>

  <script>
  $(function() {
  $('input[name="check[]"]').click(function() {
    var checkedChbx = $('[type=checkbox]:checked');
    if (checkedChbx.length > 0) {
      $('#one').show();
    } else {
      $('#one').hide();
    }
  });
});


$(document).ready(function() {

  var $submit = $("#one");
  $submit.hide();
  var $cbs = $('input[name="all_check[]"]').click(function() {
  $('input[name="check[]"]').prop('checked',$(this).is(":checked"));
    $submit.toggle($(this).is(":checked")); //use this to get the current clicked element 
  });

}); 

</script>




    <script type="text/javascript">
      var select_all = document.getElementById("select_all"); //select all checkbox
var checkboxes = document.getElementsByClassName("checkbox"); //checkbox items

//select all checkboxes
select_all.addEventListener("change", function(e){
    for (i = 0; i < checkboxes.length; i++) { 
        checkboxes[i].checked = select_all.checked;
    }
});


for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].addEventListener('change', function(e){ //".checkbox" change 
        //uncheck "select all", if one of the listed checkbox item is unchecked
        if(this.checked == false){
            select_all.checked = false;
        }
        //check "select all" if all checkbox items are checked
        if(document.querySelectorAll('.checkbox:checked').length == checkboxes.length){
            select_all.checked = true;
        }
    });
}


    </script>

    <script>
// set users via PHP

var users = "<?php if (isset($_POST['users'])) echo $_POST['users']; ?>";
// update the HTML without interfering with other scripts
(function(users){
  // check if PH
  if (users.length) {
    // update the radio option...
    var inputTag = document.querySelector('input[value="'+users+'"]');
    if (inputTag)
      inputTag.checked = true;
    // if users is "all"
    // hide the last TD of every column
    if (users == "all") {
      var lastTh = document.querySelector('tr th:last-child');
      lastTh.style.display = "none";
      var allLastTds = document.querySelectorAll('td:last-child');
      for (var i = 0; i< allLastTds.length; i++) {
        allLastTds[i].style.display="none";
      }
    }



    if (users == "approved") {
      thInputTag = document.getElementById("select_all");
      thInputTag.setAttribute("disabled", true);
    }
     var form = document.querySelector("form");
    var inputName = document.querySelectorAll('input[name="users"]');
    for (var j=0; j<inputName.length; j++)
      inputName[j].onclick=function(){
        form.submit();
        };
        }
        })(users);

</script>


候选人批准
未经批准的候选人
核准候选人
所有候选人
没有。
电子邮件ID
参考ID
名称
流动电话号码。
注册日期
审核批准

我不确定你的问题到底是什么，但我说的不是这个：

您的PHP代码：


while ($row = mysql_fetch_array($sq)) 
    {
      $disabled = '';
      if ($status == '1') 
      {
        $disabled = "disabled = 'disabled' checked='checked' ";
      }

      $id = $row['id'];
      $email = $row['email'];
      $employee_id = $row['employee_id'];
      $first_name = $row['first_name'];
      $middle_name = $row['middle_name'];
      $last_name = $row['last_name'];
      $mobile = $row['mobile'];
      $created_on1 = $row['created_on'];
      $created_on = date("d-m-Y", strtotime($created_on1));

      $return_arr[] = array("id" => $id,
        "email" => $email,
        "employee_id" => $employee_id,
        "first_name" => $first_name,
        "middle_name" => $middle_name,
        "last_name" => $last_name,
        "mobile" => $mobile,
        "created_on" => $created_on
        "disabled" => $disabled
      );
    }
  }



$i = 1; //start at one, why not.
$html = '';
while ($row = mysql_fetch_array($sq)) {
    $disabled = '';
    if ($status == '1') 
    {
        $disabled = "disabled = 'disabled' checked='checked' ";
    }

    $created_on = date("d-m-Y", strtotime($row['created_on']));

    $html .= "<tr>";
    $html .=  "<td>{$i}</td>";
    $html .= "<td>{$row['email']}</td>";
    $html .= "<td>{$row['employee_id']}</td>";
    $html .= "<td>{$row['first_name']}&nbsp;{$row['middle_name']}&nbsp;{$row['last_name']}</td>";
    $html .= "<td>{$row['mobile']}</td>";
    $html .= "<td>{$created_on}</td>";
    $html .= "<td><input type='checkbox' name='check[]' value='{$row['id']}' class='checkbox' id='select_all' {$disabled}></td>";
    $html .= "<input type='hidden' value='{$row['id']}' name='user_id' id='user_id' >"; //why is this same value as above
    $html .= "</tr>" ;
    ++$i; //increment counter
}
echo $html;


您的JS代码：


success: function(response)
    {
    console.log(response);

    var len = response.length;
    $("#datashow").empty();
        for(var i=0; i<len; i++){
        var id = response[i].id;
        var email = response[i].email;
        var employee_id = response[i].employee_id;
        var first_name = response[i].first_name;
        var middle_name = response[i].middle_name;
        var last_name = response[i].last_name;
        var mobile = response[i].mobile;
        var created_on = response[i].created_on;
        var disabled = response[i].disabled;
        var users = response[i].users;

        var tr_str = 
            "<tr>" +
            "<td>" + (i+1) + "</td>" +
            "<td>" + email + "</td>" +
            "<td>" + employee_id + "</td>" +
            "<td>" + first_name + "&nbsp;" + middle_name + "&nbsp;" + last_name + "</td>" +
            "<td>" + mobile + "</td>" +
            "<td>" + created_on + "</td>" +
            "<td><input type='checkbox' name='check[]'"  + disabled +  "value= '"  + id +  "' class='checkbox' id='select_all' ></td>" +
            "<input type='hidden' value='"  + id +  "' name='user_id' id='user_id' >" +
            "</tr>" ;


        $("#datashow").append(tr_str);
   }
}


只是因为它是AJAX并不意味着您必须返回JSON，如果您只需要返回简单的旧HTML，您就可以返回它。据我所知，这就是你所需要的

如果它不是您所需要的全部，您可以返回数据和HTML的组合

JSON示例：


   {
       "foo" : "bar",
       "html" : "<tr><td> .... </td></tr>"
   }


如果您有HTML语法错误，例如id周围缺少
“
，这可能会阻止您的选择器Javascript查找HTML元素。而且不必说您应该修复此问题


<tbody id="datashow" ></tbody> 






更新2


此外，“身份证”“每个页面/请求的属性都应该是唯一的，因此重复使用
id='select_all'
会产生不良影响。
表中的哪个元素没有显示应有的样式？谢谢您的时间。”。如您所见，我在
上追加了我的回复。而
属于我的
标记。我的猜测是，插入的行不会显示为条带化，例如，使用表类
表条带化
定义的条带化，但您希望它们显示为条带化。我说的对吗？您的页面中是否包含
bootstrap
css？请检查：
tr\u str
变量，除了复选框之外，这里没有任何HTML元素的类。尝试了您在这里提到的所有内容，但很抱歉，没有一个是我想要的。但我真的很感谢你的努力（我唯一的问题是显示要分页的广播选择的结果。目前它显示的是完整的列表，而不是每页10条记录。这并不奇怪，因为在我看来，你没有任何记录看起来像分页。抱歉，但我只是看不到。鉴于我不知道你目前正在尝试做什么，我将uld说这不太可能。我刚刚发布了一个对您当前代码的重构，删除了所有冗余。我们可以通过电子邮件连接吗？我可以在那里向您提供详细信息。如果您同意的话。

   {
       "foo" : "bar",
       "html" : "<tr><td> .... </td></tr>"
   }



$html = [];
while( ... ){
  $html[] = "<tr>";
  ...
}

echo implode(PHP_EOL, $html);



 <tbody id=datashow>  

 </tbody> 



<tbody id="datashow" ></tbody>