قابلیت جستجو با فیلتر سفارشی در DataTables با پردازش سمت سرور

DataTables یک پلاگین jQuery برای نمایش لیستی از سطر ها در جدول HTML با اینترفیس تعاملی است. این جدول شامل قابلیت هایی مثل جستجو, صفحه بندی, مرتب سازی, فیلتر و خیلی از موارد دیگر است.

با امکان پردازش سمت سرور (server-side) می توانید داده ها را بصورت داینامیک از دیتابیس دریافت و در جداول HTML به همراه قالبیت های جستجو، مرتب سازی و صفحه بندی لیست کنید.

با استفاده از این کتابخانه می توانید ساخت جدول پیشرفته را به راحتی انجام بدید

به طور معمول، قابلیت های جستجو و فیلتر در DataTables استفاده می شوند اما شما می توانید با API از جستجو سفارشی و فیلتر ورودی های (input) استفاده کنید.

در این مثال از قابلیت جستجو با فیلتر سفارشی در DataTables با پردازش سمت سرور ما داده های اعضا را از دیتابیس خوانده و به همراه جستجو سفارشی و فیلتر ورودی ها در دیتاتیبل نمایش می دهیم.

خواندن و لیست کردن داده ها از دیتابیس MySQL با استفاده از پردازش سمت سرور DataTables
افزودن مرتب سازی و صفحه بندی به جداول HTML با DataTables
افزودن جستجو سفارشی و فیلتر ورودی ها به DataTables

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

برای ذخیره اطلاعات اعضا نیاز به یک جدول در دیتابیس داریم.

کد SQL زیر جدول members را با چند فیلد پایه در دیتابیس MySQL ایجاد می کند.

CREATE TABLE `members` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `first_name` varchar(25) COLLATE utf8_unicode_ci NOT NULL,
 `last_name` varchar(25) COLLATE utf8_unicode_ci NOT NULL,
 `email` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
 `gender` enum('Male','Female') COLLATE utf8_unicode_ci NOT NULL,
 `country` varchar(20) COLLATE utf8_unicode_ci NOT NULL,
 `created` datetime NOT NULL,
 `status` tinyint(1) NOT NULL DEFAULT 1 COMMENT '1=Active | 0=Inactive',
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

CREATE TABLE `members` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`first_name` varchar(25) COLLATE utf8_unicode_ci NOT NULL,

`last_name` varchar(25) COLLATE utf8_unicode_ci NOT NULL,

`email` varchar(50) COLLATE utf8_unicode_ci NOT NULL,

`gender` enum('Male','Female') COLLATE utf8_unicode_ci NOT NULL,

`country` varchar(20) COLLATE utf8_unicode_ci NOT NULL,

`created` datetime NOT NULL,

`status` tinyint(1) NOT NULL DEFAULT 1 COMMENT '1=Active | 0=Inactive',

PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

افزودن DataTables به جدول HTML با جستجو سفارشی و فیلتر (index.html)

در این صفحه وب، داده های داینامیک در یک جدول HTML به همراه جستجو سفارشی و فیلتر توسط پلاگین جی کوئری DataTables اضافه می شود.

کتابخانه JS و CSS دیتاتیبل:

فایل های کتابخانه DataTables و jQuery را فراخوانی می کنیم.

<!-- DataTables CSS library -->
<link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css"/>

<!-- jQuery library -->
<script src="js/jquery.min.js"></script>

<!-- DataTables JS library -->
<script type="text/javascript" src="DataTables/datatables.min.js"></script>

جدول HTML به همراه جستجو و فیلتر ورودی:

یک جدول HTML می سازیم و سلکتور #memListTable را به این المان اضافه می کنیم.

افزودن فیلد جستجو و منو آبشاری فیلتر برای مرتب سازی سطرها بر اساس جنسیت

<div class="post-search-panel">
    <input type="text" id="searchInput" placeholder="Type keywords..." />
    <select id="sortBy">
        <option value="">Sort by</option>
        <option value="Male">Male</option>
        <option value="Female">Female</option>
    </select>
</div>
<table id="memListTable" class="display" style="width:100%">
    <thead>
        <tr>
            <th>First name</th>
            <th>Last name</th>
            <th>Email</th>
            <th>Gender</th>
            <th>Country</th>
            <th>Created</th>
            <th>Status</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>First name</th>
            <th>Last name</th>
            <th>Email</th>
            <th>Gender</th>
            <th>Country</th>
            <th>Created</th>
            <th>Status</th>
        </tr>
    </tfoot>
</table>

<option value="Female">Female</option>

</select>

</div>

<thead>

<tr>

<th>First name</th>

<th>Email</th>

<th>Gender</th>

<th>Country</th>

<th>Created</th>

<th>Status</th>

</tr>

</thead>

<tfoot>

<tr>

<th>First name</th>

<th>Email</th>

<th>Gender</th>

<th>Country</th>

<th>Created</th>

<th>Status</th>

</tr>

</tfoot>

</table>

افزودن DataTables به جدول HTML

کلاس DataTables API را با متد DataTable() ایجاد و آبجکت جدول را پیکربندی می کنیم.

برای غیرفعال سازی جستجو پیش فرض، مقدار گزینه searching را false ست می کنیم.
برای فعالسازی پردازش سمت سرور
- مقدار prossesing را true قرار میدیم.
- مقدار serverSide را true قرار میدیم.
- آدرس اسکریپت سمت سرور را (getData.php) را گزینه url شئ ajax مشخص می کنیم
برای فعال کردن جستجو سفارشی و فیلتر از متد extend() بهره می بریم.
- نام فیلد سفارشی را مشخص و مقدار input را انتخاب کنید

<script>
// Initialize DataTables API object and configure table
var table = $('#memListTable').DataTable({
    "searching": false,
    "processing": true,
    "serverSide": true,
    "ajax": {
       "url": "getData.php",
       "data": function ( d ) {
         return $.extend( {}, d, {
           "search_keywords": $("#searchInput").val().toLowerCase(),
           "filter_option": $("#sortBy").val().toLowerCase()
         } );
       }
     }
});

$(document).ready(function(){
    // Redraw the table
    table.draw();
    
    // Redraw the table based on the custom input
    $('#searchInput,#sortBy').bind("keyup change", function(){
        table.draw();
    });
});
</script>

// Initialize DataTables API object and configure table

var table = $('#memListTable').DataTable({

"searching": false,

"processing": true,

"serverSide": true,

"ajax": {

"url": "getData.php",

"data": function ( d ) {

return $.extend( {}, d, {

"search_keywords": $("#searchInput").val().toLowerCase(),

"filter_option": $("#sortBy").val().toLowerCase()

} );

}

});

$(document).ready(function(){

// Redraw the table

table.draw();

// Redraw the table based on the custom input

$('#searchInput,#sortBy').bind("keyup change", function(){

table.draw();

});

</script>

اسکریپت سمت سرور (getData.php)

فایل getData.php برای انجام عملیات پردازش سمت سرور به همراه جستجو و فیلتر استفاده می شود.

برای آسان سازی عملیات ساخت کویری SQL ، از کلاس SSP استفاده می کنیم (ssp.class.php)

تابع simple() کلاس SSP، به ما کمک می کند که داده های اعضا را از دیتابیس بر اساس کوئری جستحو و فیلتر توسط PHP و MySQL دریافت کنیم.

<?php 
// Database connection info 
$dbDetails = array( 
    'host' => 'localhost', 
    'user' => 'root', 
    'pass' => 'root', 
    'db'   => 'codexworld' 
); 
 
// DB table to use 
$table = 'members'; 
 
// Table's primary key 
$primaryKey = 'id'; 
 
// Array of database columns which should be read and sent back to DataTables. 
// The `db` parameter represents the column name in the database.  
// The `dt` parameter represents the DataTables column identifier. 
$columns = array( 
    array( 'db' => 'first_name', 'dt' => 0 ), 
    array( 'db' => 'last_name',  'dt' => 1 ), 
    array( 'db' => 'email',      'dt' => 2 ), 
    array( 'db' => 'gender',     'dt' => 3 ), 
    array( 'db' => 'country',    'dt' => 4 ), 
    array( 
        'db'        => 'created', 
        'dt'        => 5, 
        'formatter' => function( $d, $row ) { 
            return date( 'jS M Y', strtotime($d)); 
        } 
    ), 
    array( 
        'db'        => 'status', 
        'dt'        => 6, 
        'formatter' => function( $d, $row ) { 
            return ($d == 1)?'Active':'Inactive'; 
        } 
    ) 
); 
 
$searchFilter = array(); 
if(!empty($_GET['search_keywords'])){ 
    $searchFilter['search'] = array( 
        'first_name' => $_GET['search_keywords'], 
        'last_name' => $_GET['search_keywords'], 
        'email' => $_GET['search_keywords'], 
        'country' => $_GET['search_keywords'] 
    ); 
} 
if(!empty($_GET['filter_option'])){ 
    $searchFilter['filter'] = array( 
        'gender' => $_GET['filter_option'] 
    ); 
} 
 
// Include SQL query processing class 
require 'ssp.class.php'; 
 
// Output data as json format 
echo json_encode( 
    SSP::simple( $_GET, $dbDetails, $table, $primaryKey, $columns, $searchFilter ) 
);

<?php

// Database connection info

$dbDetails = array(

'host' => 'localhost',

'user' => 'root',

'pass' => 'root',

'db' => 'codexworld'

);

// DB table to use

$table = 'members';

// Table's primary key

$primaryKey = 'id';

// Array of database columns which should be read and sent back to DataTables.

// The `db` parameter represents the column name in the database.

// The `dt` parameter represents the DataTables column identifier.

$columns = array(

array( 'db' => 'first_name', 'dt' => 0 ),

array( 'db' => 'last_name', 'dt' => 1 ),

array( 'db' => 'email', 'dt' => 2 ),

array( 'db' => 'gender', 'dt' => 3 ),

array( 'db' => 'country', 'dt' => 4 ),

array(

'db' => 'created',

'dt' => 5,

'formatter' => function( $d, $row ) {

return date( 'jS M Y', strtotime($d));

}

array(

'db' => 'status',

'dt' => 6,

'formatter' => function( $d, $row ) {

return ($d == 1)?'Active':'Inactive';

}

)

);

$searchFilter = array();

if(!empty($_GET['search_keywords'])){

$searchFilter['search'] = array(

'first_name' => $_GET['search_keywords'],

'last_name' => $_GET['search_keywords'],

'email' => $_GET['search_keywords'],

'country' => $_GET['search_keywords']

);

}

if(!empty($_GET['filter_option'])){

$searchFilter['filter'] = array(

'gender' => $_GET['filter_option']

);

}

// Include SQL query processing class

require 'ssp.class.php';

// Output data as json format

echo json_encode(

SSP::simple( $_GET, $dbDetails, $table, $primaryKey, $columns, $searchFilter )

);

کتابخانه SSP

کلاس SSP برای هندل عمبیات مربوط به دیتابیس استفاده می شود. این کلاس شامل توابع کمکی برای ساخت کوئری ها برای پردازش سمت سرور به همراه جستجو و فیلتر استفاده می شود.

شما می توانید کدهای کتابخانه SSP را از باکس دانلود دریافت کنید.

جمع بندی

با این آموزش و اسکریپت شما می توانید قابلیت جستجو سفارشی و فیلتر را به پلاگین DataTables به راحتی اضافه کنید.

شما می توانید پردازش سمت سرور DataTables را فعال کنید و ورودی سفارشی را برای جستجو، فیلتر و مرتب سازی سطرها اضافه کنید.

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

DataTables API به شما امکان افزودن انواع پیکربندی را به جدول به همراه داده سمت سرور از دیتابیس را می دهد.

امیدوارم از آموزش قابلیت جستجو با فیلتر سفارشی در DataTables با پردازش سمت سرور نهایت استفاده را برده باشید.

هر سوالی داشتید، از قسمت نظرات ارسال کنید. سریعا، پاسخگوی سوالات شما هستیم.

موفق و پیروز باشید.

لغو پاسخ

راد ۶ خرداد ۱۴۰۳

سلام اگر فیلم آموزشی وجود داشت بنظرم خیلی کاربردی تر میشد چون خودم چندبار تست کردم نتونستم پروژه رو بالا بیارم ممنون

پاسخ

حسن شفیعی ۶ خرداد ۱۴۰۳

سلام. بستگی به نوع پروژه شما داره و باید با ساختار پروژه خودتون اشنایی داشته باشید تا بتونید این رو بهش اضافه کنید

پاسخ

یوما ۲۲ فروردین ۱۴۰۳

سلام. چرا کتابخانه رو لینکش رو نذاشتید و این پست باکس دانلود نداره؟؟

پاسخ

حسن شفیعی ۲۴ فروردین ۱۴۰۳

سلام. در خود اموزش بالا لینک شده
DataTables
روی لینک بزنید از سایت رسمی اخرین نسخه رو میتونید دانلود کنید یا لینک cdn رو داخل اسکریپت بزارید

پاسخ

حسین حمزه ۳ خرداد ۱۴۰۱

سلام اگه میشه آموزش نحوه استفاده از کتابخانه grid سایت telerik رو قرار بدید
ممنون میشم

پاسخ

حسن شفیعی ۴ خرداد ۱۴۰۱

سلام.
بله سعی میشه در این مورد آموزشی قرار داده بشه

پاسخ

امیر خسروشاهی ۲۴ بهمن ۱۳۹۹

سلام آقای شفیعی با این کتابخوانه میشه صفحه فیلتر محصولات ساخت ؟؟

پاسخ

حسن شفیعی ۲۵ بهمن ۱۳۹۹

سلام. بله میتونید

پاسخ

قابلیت جستجو با فیلتر سفارشی در DataTables با پردازش سمت سرور

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

افزودن DataTables به جدول HTML با جستجو سفارشی و فیلتر (index.html)

کتابخانه JS و CSS دیتاتیبل:

جدول HTML به همراه جستجو و فیلتر ورودی:

افزودن DataTables به جدول HTML

اسکریپت سمت سرور (getData.php)

کتابخانه SSP

جمع بندی

ساخت سیستم نوتیفیکیشن با php و Ajax

قابلیت جستجو در DataTables با پردازش سمت سرور

دریافت خروجی DataTables با PHP و Mysql

متد $.ajax() در jQuery

لغو پاسخ

دوره آموزش ساخت دیجی کالا با php به همراه اپلیکیشن اندروید

آموزش ساخت ربات تلگرام با PHP (از پایه و پروژه محور)

دوره جامع آموزش طراحی سایت + پروژه قالب فروشگاه