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

时间:2018-10-25 02:55:16

标签: javascript php jquery codeigniter

如何使用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:

<!-- 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刷新,我在google中搜索但不起作用
如何刷新下面的表div?

1 个答案:

答案 0 :(得分:0)

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

假设您的日期选择器的ID为 dp

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

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

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