آموزش Filters در بوت استرپ

بهاره حسنیبهاره حسنی
261 بازدید
جستجو
[cdb_box_content css=”.vc_custom_1573588596735{background-color: #1e73be !important;}”]

بوت استرپ ۴ مولفه ای ندارد که امکان جستجو کردن (filtering) را داشته باشد.

با این حال میتوانیم از jQuery برای جستجوی عناصر استفاده نماییم.

در این مطلب نحوه استفاده از ویژگی filtering در بوت استرپ را به شما آموزش میدهیم.

[/cdb_box_content]

با عرض سلام خدمت شما همراهان عزیز وب سایت پرنیان طرح

در این مبحث ویژگی filtering در بوت استرپ را آموزش میدهیم.

Filter Tables :

در این مثال قصد داریم درون جدول یک مقدار برای نام ، نام خانوادگی یا ایمیل را جستجو نماییم برای این منظور در قسمت ورودی باید چیزی تایپ نمایید.

توضیح : ما برای جا به جایی از هر سطر جدول از jQuery استفاده میکنیم که آیا مقداری وجود دارد که با مقدار فیلد ورودی مطاقبت داشته باشد.

به همین ترتیب مقدار را بر اساس جستجو پیدا میکنیم و نمایش میدهیم

مثال :

[php]

<body>

<div class=”container mt-3″>
<h2>Filterable Table</h2>
<p>Type something in the input field to search the table for first names, last names or emails:</p>
<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>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@greatstuff.com</td>
</tr>
<tr>
<td>Anja</td>
<td>Ravendale</td>
<td>a_r@test.com</td>
</tr>
</tbody>
</table>

<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
</div>

<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>

</body>

[/php]

تصویر خروجی مثال بالا :

جدول با قابلیت جستجو

filterable table

Filter Lists :

از ویژگی جستجو کردن در لیست ها استفاده نمایید برای اینکار چیزی در قسمت ورودی تایپ کنید تا در لیست جستجو کند و مقدار را پیدا کند.

[php]

<body>

<div class=”container mt-3″>
<h2>Filterable List</h2>
<p>Type something in the input field to search the list for specific items:</p>
<input class=”form-control” id=”myInput” type=”text” placeholder=”Search..”>
<br>
<ul class=”list-group” id=”myList”>
<li class=”list-group-item”>First item</li>
<li class=”list-group-item”>Second item</li>
<li class=”list-group-item”>Third item</li>
<li class=”list-group-item”>Fourth</li>
</ul>
</div>

<script>
$(document).ready(function(){
$(“#myInput”).on(“keyup”, function() {
var value = $(this).val().toLowerCase();
$(“#myList li”).filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>

</body>

[/php]

تصویر زیر خروجی مثال بالا خواهد بود :

لیست قابل جستجو

filterable list

Filter Anything :

برای هر المانی میتوانید از ویژگی فیلترینگ استفاده نمایید در مثال زیر برای جستجوی یک متن درون المان div استفاده کرده ایم.

مثال :

[php]

<body>

<div class=”container mt-3″>
<h2>Filter Anything</h2>
<p>Type something in the input field to search for a specific text inside the div element with id=”myDIV”:</p>
<input class=”form-control” id=”myInput” type=”text” placeholder=”Search..”>
<div id=”myDIV” class=”mt-3″>
<p>I am a paragraph.</p>
<div>I am a div element inside div.</div>
<button class=”btn”>I am a button</button>
<button class=”btn btn-info”>Another button</button>
<p>Another paragraph.</p>
</div>
</div>

<script>
$(document).ready(function(){
$(“#myInput”).on(“keyup”, function() {
var value = $(this).val().toLowerCase();
$(“#myDIV *”).filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>

</body>

[/php]

تصویر مثال بالا :

جستجوی هر چیزی

filter anything

دسته بندی آموزش bootstrap
اشتراک گذاری

نوشته های مرتبط

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

22+ محصولات
401+ سفارشات تکمیل شده
2086+ کاربران
399+ مطالب وبلاگ
سبد خرید

هیچ محصولی در سبد خرید نیست.

ورود به سایت