时间戳

首页 > 解决方案 > 如何在 Codeigniter 中使用 jquery 刷新同一页面中的 div 数据表？

javascript - 如何在 Codeigniter 中使用 jquery 刷新同一页面中的 div 数据表？

问题描述

如何使用 jquery 刷新同一页面中的数据表？

    <!-- reload data table -->
      $.ajax({
                    success: function(response){
                                     $(".container").text(response);
                    }
                });
    }
    <!-- reload data table -->
    
    <!-- Table -->
    <div class="container">
      <div class="panel panel-default">
        <div class="panel-body">
    
          <?php
    
          if ( !empty($log) ) {
              echo '<div class="table-responsive table-striped">';
            echo '<table class="table">
               <thead>
                 <tr>
                   <th class="text-center">Time</th>
                   <th class="text-center">Type</th>
                   <th>Details</th>
                 </tr>
               </thead>';
    
            echo '<tbody>';
    
            foreach ($log as $value) {
    
              echo '<tr>';
              echo '<td>'.$value['time'].'</td>';
    
              switch($value['severity']) {
                case 'Error':
                  $button_type = 'btn-danger';
                  break;
                case 'Warning':
                  $button_type = 'btn-warning';
                  break;
                case 'Notice':
                  $button_type = 'btn-default';
                  break;
              }
    
              echo '<td><button class="btn btn-xs '.$button_type.' btn-block" disabled>'.$value['severity'].'</button></td>';
              echo '<td>'.$value['error'].'</td>';
              echo '</tr>';
    
            }
    
            echo '</tbody>';
            echo '</table>';
            echo '</div>';
    
          } elseif ( $log_threshold < 1 && empty($logs) ) {
    
            // the setting in config are not correct
            echo 'Please change the setting $config["log_threshold"] = 1 in config/config.php';
    
          } elseif ( $log_threshold >= 1 && empty($logs) ) {
    
            // there are no logs
            echo 'No log files found';
    
          } else {
            echo '<div class="table-responsive table-striped">';
            echo '<table class="table">
               <thead>
                 <tr>
                   <th class="text-center">Time</th>
                   <th class="text-center">Type</th>
                   <th>Details</th>
                 </tr>
               </thead>';
    
            echo '<tbody>';
            echo '<tr>
                  <td colspan=3 style=text-align:center;>No errors or warnings, please set hide_notices to false if you want to view notices</td>';
            echo '</tr>';
    
            echo '</tbody>';
            echo '</table>';
            echo '</div>';
    
          }
          ?>
    <!-- Table  -->
    
    
       </div>
      </div>
      </div>

这下面的代码日期选择器：

<!-- Datepicker -->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#txtDate").datepicker({
      dateFormat:'yy-mm-dd',
      onSelect: function(tgl) {
        var url = "<?php echo $url; ?>";
        window.location=url + '?log_date=' + tgl
      }
    });

   $('#txtDate').focus(function() {

     $(this).datepicker("show");

     setTimeout(function() {

       $('#txtDate').datepicker("hide");

       $('#txtDate').blur();

     }, 10000)

   })
  });
  </script>

</head>
</html>
<!-- Datepicker -->

我有页面内容数据表，我想刷新该表但不工作，我不知道代码 jquery 在同一页面中刷新，不加载另一个页面，但在同一页面 php 中刷新，我在谷歌搜索但不工作
如何刷新下面的表 div ？

标签： javascriptphpjquerycodeigniter

解决方案

无论您在 HTML 代码中设置了什么，都需要在 datepicker id 或 class 上触发 ajax。

例如，假设您的日期选择器具有 id dp

$('#dp').datepicker({
        //other settings
        onSelect: function (date) {
           $.ajax({
               //your ajax code
           })
        }
    });

如果您想在ajax调用后更新您的 div，请给您的div一个id。

    $.ajax({
     success:function(response){
      $("#content").html(response);
     }    
   })

推荐阅读