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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

回答：

您可以使用$("#table").empty()它以清除新的搜索追加数据之前

以上是 成功追加数据到您的表 - JS 的全部内容， 来源链接： utcz.com/qa/261559.html

回到顶部