• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

成功追加数据到您的表 – JS

JavaScript 来源:XamarinDevil 3次浏览

我能够成功地查询我的数据库以查找现有数据。但是现在,我不知道如何让表格只显示正在搜索的项目。当文本框被清除时,表格应该回到默认状态。成功追加数据到您的表 – JS

我该如何做到这一点?

控制器

public function index(Request $request) 
     { 
      $query = "%".$request->get('myInput')."%"; 
      $students = Student::where('name','LIKE',$query)->where('grade_id',Auth::user()->grade_id)->paginate(5);    
      return view('customer.index',compact('stduent','query')); 

     } 

JS

<script> 
     $(document).ready(function() { 
       var typingTimer;    //timer identifier 
       var doneTypingInterval = 100; //time in ms (5 seconds) 

       $("#myInput").on('keyup', function() { 


    clearTimeout(typingTimer); 
       if ($('#myInput').val()) { 
        typingTimer = setTimeout(doneTyping, doneTypingInterval); 
       } 
      }); 
     }); 

     //user is "finished typing," do something 
     function doneTyping() { 
      var key = $('#myInput').val(); 

      if (key.length >= 1) { 
       $.ajax({ 
        url: '/admin/search/?myInput='+key, 
        type: 'GET', 
        beforeSend: function() { 
        $("#table").slideUp('fast'); 

        }, 
        success: function (data) { 
         console.log(data); 
         $("#table").append(data); 
         $("#table").slideDown('fast'); 
        } 
       }); 

     } 
    } 
    </script> 

===========解决方案如下:

你可以试试这个:

success: function (data) { 

    var table = $("#table tbody"); 

    $.each(data, function(idx, elem){ 

    table.append(" 
    <tr><td>"+elem.id+"</td> 
    <td>"+elem.name+"</td> 
    <td>"+elem.lastname+"</td> 
    </tr> 
    "); 
    }); 
    } 

因为您正在检查if (key.length >= 1)这意味着如果用户没有输入任何内容,请将该表与当前内容留在一起。 Read this


版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)