استخدام jQuery.datatables.js وشرح API مثال

1、إعداد افتراضي لـ DataTables

$.document.ready(function() {
$(''#example'').dataTable();
});

مثال:http://www.guoxk.com/html/DataTables/Zero-configuration.html

2、إعداد بعض الخصائص الأساسية لـ DataTables

"bPaginate": true, //دعم التصفح
"bLengthChange": true, //تغيير عدد الصفوف في كل صفحة
"bFilter": true, //دعم التصفية
"bSort": false, //دعم الترتيب
"bInfo": true,//معلومات الأقدام
"bAutoWidth": true//اتساع تلقائي

مثال:http://www.guoxk.com/html/DataTables/Feature-enablement.html

3、ترتيب البيانات

$.document.ready(function() {
$('#example').dataTable({
"aaSorting": [
[ 4, "desc" ]
]
});
});

تبدأ من العمود 0، ترتيب العمود 4 بالعكس

مثال:http://www.guoxk.com/html/DataTables/Sorting-data.html

4、ترتيب عدة أعمدة

مثال:http://www.guoxk.com/html/DataTables/Multi-column-sorting.html

5、إخفاء بعض الأعمدة

$.document.ready(function() {
$('#example').dataTable({
"aoColumnDefs": [
{ "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] }
{ "bVisible": false, "aTargets": [ 3 ] }}}
] } );
});

مثال:http://www.guoxk.com/html/DataTables/Hidden-columns.html

6、تغيير موضع العناصر على الصفحة

$.document.ready(function() {
$('#example').dataTable({
"sDom": ‘<”top”fli>rt<”bottom”p><”clear”>'
});
});
//l- عدد الصفحات المعروضة
//f – مدخل التصفية
//t – جدول Table
//i – معلومات
//p – التصفح
//r – pRocessing
//< و > – عناصر div
//<”class” and > – div مع فئة
//أمثلة: <”wrapper”flipt>, <lf<t>ip>

مثال:http://www.guoxk.com/html/DataTables/DOM-positioning.html

7、حفظ الحالة، إذا استخدمت التصفح أو غيرت عدد البيانات المعروضة في كل صفحة، سيتم حفظها في ملفات الكوكيز، وسيتم عرض المحتوى الذي تم فتحه في المرة السابقة عند زيارتك مرة أخرى.

$.document.ready(function() {
$('#example').dataTable({
"bStateSave": true
});
});

مثال:http://www.guoxk.com/html/DataTables/State-saving.html

8、نمط التصفح المعتمد على الأرقام

$.document.ready(function() {
$('#example').dataTable({
"sPaginationType": "full_numbers"
});
});

مثال:http://www.guoxk.com/html/DataTables/Alternative-pagination-styles.html

9、تحديد العرض بشكل أفقي

$.document.ready(function() {
$('#example').dataTable({
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true
});
});

مثال:http://www.guoxk.com/html/DataTables/Horizontal.html

10、تحديد الارتفاع بشكل عمودي

مثال:http://www.guoxk.com/html/DataTables/Vertical.html

11、تحديد إتجاهين أفقي وعمودي معًا

مثال:http://www.guoxk.com/html/DataTables/HorizontalVerticalBoth.html

12、تغيير اللغة

$.document.ready(function() {
$('#example').dataTable({
"oLanguage": {
“sLengthMenu”: “عرض _MENU_ سجلات في كل صفحة”
“sZeroRecords”: “آسف، لم يتم العثور على أي شيء”,
“sInfo”: “من _START_ إلى _END_ / مجموع _TOTAL_ بيانات”,
“sInfoEmpty”: “لا توجد بيانات”,
“sInfoFiltered”: “(من _MAX_ بيانات تم البحث عنها)”,
“oPaginate”: {
“sFirst”: “الصفحة الأولى”,
“sPrevious”: “الصفحة السابقة”,
“sNext”: “الصفحة التالية”,
“sLast”: “الصفحة الأخيرة”
}
“sZeroRecords”: “لم يتم العثور على بيانات”,
“sProcessing”: “<img src=\'#\'" /loading.gif' />”
}
});
});

مثال:http://www.guoxk.com/html/DataTables/Change-language-information.html

13、حدث النقر

مثال:http://www.guoxk.com/html/DataTables/event-click.html

14/استخدام وحدة التوجيه

مثال:http://www.guoxk.com/html/DataTables/tooltip.html

15、تحديد عدد البيانات التي يتم عرضها في كل صفحة

$.document.ready(function() {
$('#example').dataTable({
“aLengthMenu”: [[10, 25, 50, -1], [10, 25, 50, "All"]]
});
});

مثال:http://www.guoxk.com/html/DataTables/length_menu.html

16、row callback

مثال:http://www.guoxk.com/html/DataTables/RowCallback.html

إذا كان القيمة في الستون الأخير "A" فإنه يتم عرضه بوضوح

17、تحكم الترتيب

$.document.ready(function() {
$('#example').dataTable({
"aoColumns": [
null,
{ "asSorting": [ "asc" ] },
{ “asSorting”: [ "desc", "asc", "asc" ] },
{ “asSorting”: [ ] },
{ “asSorting”: [ ] }
]
});
});

مثال:http://www.guoxk.com/html/DataTables/sort.html

شرح: الستون الأول عند النقر يتم ترتيب الأعمدة بشكل افتراضي، الستون الثاني عند النقر يتم ترتيب الأعمدة بالترتيب، الستون الثالث عند النقر مرة واحدة يتم ترتيب العكس، مرتين ترتيب، الستون الرابع والخامس عند النقر لا يتم ترتيب

18、قراءة مكتبة اللغة من ملف الإعدادات

$.document.ready(function() {
$('#example').dataTable({
"oLanguage": {
"sUrl": "cn.txt"
}
});
});

19、استخدام مصدر AJAX

$.document.ready(function() {
$('#example').dataTable({
"bProcessing": true,
"sAjaxSource": './arrays.txt'
});
});

مثال:http://www.guoxk.com/html/DataTables/ajax.html

20、استخدام AJAX لتنظيم البيانات على الجهاز السيرفر

$.document.ready(function() {
$('#example').dataTable({
"bProcessing": true,
"bServerSide": true,
"sPaginationType": "full_numbers"
"sAjaxSource": "./server_processing.php"
/*إذا تم إضافة هذا النص، سيتم استخدام طريقة POST لتقديم البيانات
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
});
}
"oLanguage": {
"sUrl": "cn.txt"
}
"aoColumns": [
{"sName": "platform"},
{"sName": "version"},
{"sName": "engine"},
{"sName": "browser"},
{"sName": "grade"}
//$_GET['sColumns'] سيستلم بيانات aoColumns
});
});

مثال:http://www.guoxk.com/html/DataTables/ajax-serverSide.html

21、تحميل id وclass لكل سطر

التنسيق الذي يعتمده الجهاز السيرفر لتقديم البيانات:

{
"DT_RowId": "row_8",
"DT_RowClass": "gradeA",
"0": "Gecko",
"1": "Firefox 1.5",
"2": "Win 98+ / OSX.2+",
"3": "1.8",
"4": "A"
}

مثال:http://www.guoxk.com/html/DataTables/add_id_class.html

22، عرض تفاصيل كل صف، انقر على رمز '+' في بداية الصف لفتح عرض التفاصيل

مثال:http://www.guoxk.com/html/DataTables/with-row-information.html

23، اختيار صفوف متعددة

مثال:http://www.guoxk.com/html/DataTables/selectRows.html

22، دمج jQuery plugin jEditable

مثال:http://www.guoxk.com/html/DataTables/jEditable-integration.html

المزيد من التوجيهات:

الشيء المهم هو أن العنصر الجدول (table) الذي سيتم معالجته بواسطة dataTable يجب أن يحتوي على thead وtbody، وأن تكون بنية العناصر منظمة (لا يجب أن تكون البيانات كاملة)، حتى يتم معالجتها بشكل صحيح.

الخطوات التالية هي المعلمات التي يمكن إضافتها عند إعداد dataTable:

ما ذكرته أعلاه هو شرح استخدامه لجافا سكريبت jQuery.datatables.js وشرح تفصيلي للوظائف والوظائف المثيلة، آمل أن يكون هذا مفيدًا لكم، إذا كان لديكم أي استفسارات، يرجى ترك تعليق، وسأقوم بالرد على رسائلكم في أقرب وقت ممكن. شكرًا جزيلاً لدعمكم لموقع呐喊 التعليمي!

بيان: محتويات هذا المقال تم جمعها من الإنترنت، ويتمتع المالك الأصلي بحقوق الطبع والنشر، ويتم جمع المحتوى بشكل تلقائي من قبل مستخدمي الإنترنت ويتم تحميله بشكل مستقل، لا يمتلك هذا الموقع حقوق الملكية، ولا يتم تعديل المحتوى بشكل يدوي، ولا يتحمل هذا الموقع أي مسؤولية قانونية مرتبطة بذلك. إذا كنت قد وجدت محتوى يشتبه في انتهاك حقوق النسخ، فنرجو منك إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # ب @) لإبلاغنا، وقدم الدليل على الدليل، إذا تم التحقق من ذلك، سيتم حذف المحتوى المزعوم فورًا.