پاسخ داده شد
0
0

چگونه می توانیم امکان جستجو در جدول با استفاده از bootstrap داشته باشم؟

  • شما باید برای ارسال دیدگاه شوید
پاسخ عالی
0
0

در bootstrap  کامپوننتی برای قرار دادن فیلتر روی جدول نداریم و باید از جی کوئری استفاده کنیم.در مثال زیر یک فیلتر روی ستون های جدول فیلتر قرار داده ایم که براساس حرف  اول بتوانیم جستجو انجام دهیم.

<div class="container mt-3">
  <input class="form-control" id="myInput" type="text" placeholder="Search..">
  <br>
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody id="myTable">
      <tr>
        <td>vfeee</td>
        <td>fds</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>sara</td>
        <td>dfggs</td>
        <td>mghgary@gmail.com</td>
      </tr>
      <tr>
        <td>sam</td>
        <td>sam</td>
        <td>july@dfr.com</td>
      </tr>
      <tr>
        <td>reza</td>
        <td>rezaee</td>
        <td>rezza@rere.com</td>
      </tr>
    </tbody>
  </table>
  
<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>
  • شما باید برای ارسال دیدگاه شوید
نمایش 1 نتیجه
پاسخ شما
اگر قبلاً حساب کاربری دارید با پر کردن فیلد های زیر یا به عنوان مهمان ارسال کنید.
نام*
ایمیل*
وب سایت