مع تطور الحوسبة السحابية ، تحولت او انتقلت الكثير من الأنظمة المعلوماتية سواء الإدارية او المحاسبية الى الشبكة العنكبوتية حيث يمكن الدخول اليها من اي مكان، مخزنة على سيرفرات ضخمة.
لهذا صار استعراض جداول البيانات على مواقع الويب شيء اساسي ، والتعديل عليها مع العديد من الوظائف مثل البحث والفرز والتنقل ، سنقدم لكم اليوم افضل واضخم اضافة لأداء هذه المهمة والتي يستخدمها ملايين المبرمجين في اعمالهم على مواقع الويب وهي اضافة جي كويري JQuery DataTables Plug-ins.
DataTables Plug-ins هي عبارة عن اضافة حديثة مبنية بمكتبة الجي كويري تعمل على اضافة جداول بيانات تفاعلية - على شكل اعمدة وصفوف - مع ادوات تحكم متقدمة على صفحات الويب، ولديها العديد من المميزات والوظائف في استعراض البيانات على صفحات الويب.
مميزات اضافة جداول البيانات DataTables Plugin
- سهولة الإعداد والتثبيت على صفحات الويب.
- المرونة وتعدد الخيارات، التي تمكنك من تخصيص الأدوات وتغييرها.
- يدعم الاتجاه من اليمين الى اليسار واللغة العربية.
- يدعم جميع اطارات عمل تصميم مواقع الويب ، كالبوتستراب وماتريال ديزين و foundation وغيرها، حيث يحتوي على ملف CSS لكل اطار لتطابق التصميم مع تصميم موقع الويب، وذلك لما تتمتع به الإضافة من تصميم مميز.
- يحتوي على العديد من الأدوات المتقدمة كالبحث والفلتره في الوقت الحقيقي Real Time Searcher ، والترتيب او الفرز المتعدد على حسب العمود المختار واداة التنقل وتضمين عناصر HTML في جدول البيانات.
- التعامل مع لغات البرمجة في جهة الخادم Server-Side كلغة PHP والبايثون وغيرها.
- امكانية جلب البيانات والتعامل معها بواسطة تقنية الأجاكس.
- قابلية التوسع والتطوير حيث توجد العديد من الإضافات المطورة من هذه الإضافة والتي منها اضافة wpDataTables للوردبرس، وايضا حزم Packages عديدة للعمل في اطار العمل لارافيل Laravel والذي يعتبر الأكثر شهرة واستخداما في المواقع الخدمية على الويب.
- يحتوي على العديد من الملحقات التي يمكن اضافتها لزيادة امكانيات الإضافة.
- يوجد على شبكة توصيل المحتوى CDN لتضمينه مباشرة في موقعك.
كيفية تثبيت اضافة DataTables في صفحة الويب
بما أن الإضافة مبنية بواسطة مكتبة الجي كويري jQuery يجب استدعاء المكتبة اذا لم تكن مستخدمة في الموقع كالتالي:
<script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>اسدعاء ملف الـ CSS:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.4/css/jquery.dataTables.css">
استدعاء ملف الجافا سكربت JS:
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.js"></script>اضافة اكواد HTML في صفحة الويب :
<table id="table_data" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>اضافة كود الجافاسكربت لتطبيق وتشغيل الإضافة:
<script>
$(document).ready( function () {
$('#table_data').DataTable();
} );
</script>ايضاَ توجد إضافة DataTables على NPM يمكن تثبيها بالاعدادات الافتراضية بالكود التالي:
npm install datatables.net # Core library
npm install datatables.net-dt # Stylingكما ايضاَ يمكن تثبيتها من خلال Bower كالتالي:
bower install --save datatables.net
bower install --save datatables.net-dtتعتبر الإضافة من الإضافات الاساسية التي يعتمد عليها الكثير من المطورين في استعراض البيانات وفلترتها على الويب، والتي عادةَ ما تأتي مضمنة في كثير من قوالب لوحات التحكم Admin Dashboard.
فالإضافة تحتوي على العديد من الخيارات التي يمكن تخصيصها حسب احتياجات عملك ومتطلباته، لذا يمكنك الدخول الى الموقع الخاص بالإضافة datatables.net لتتعرف اكثر على اعدادات وتخصيص الإضافة، ومعرفة مصادر البيانات المدعومة التي يمكن جلب البيانات منها وكيف يتم ذلك.
كانت هذه اضافة رائعة لإستعراض جداول البيانات على مواقع الويب يجب على كل مطور ويب معرفتها واستخدامها، والى اضافة اخرى بإذن الله، دمتم بخير.