در این قسمت اطلاعات را به صورت ajax از یک فایل متنی می‌خوانیم و آنها را
در جدول قرار می‌دهیم. سپس به سفارشی کردن بعضی از قسمتهای DataTables
خواهیم پرداخت.
دریافت اطلاعات به صورت ajax از یک فایل متنی
فرض کنید که اطلاعات در یک فایل txt به صورت اشیاء جاوا اسکریپتی ذخیره
شده اند، و این فایل بر روی سرور قرار دارد. می‌خواهیم از این فایل به
عنوان منبع داده استفاده کرده و اطلاعات درون آن را به صورت ajax دریافت
کرده و در یک جدول html تزریق کنیم. خوشبختانه با استفاده از امکاناتی که
این پلاگین تهیه کرده است این کار به سادگی امکان پذیر است.
همان طور که در
اینجا
بیان شده است ، فرض کنید که جدولی داشته باشیم و بخواهیم اطلاعات راجع به
مرورگرهای مختلف را در آن نمایش دهیم. قصد داریم این جدول شامل قسمتهای header و
footer و نیز body باشد، بدین صورت:
<table id="browsers-grid">
<thead>
<tr>
<th width="20%">موتور رندرگیری</th>
<th width="25%">مرورگر</th>
<th width="25%">پلتفرم (ها)</th>
<th width="15%">نسخه موتور</th>
<th width="15%">نمره css</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th>موتور رندرگیری</th>
<th>مرورگر</th>
<th>پلتفرم (ها)</th>
<th>نسخه موتور</th>
<th>نمره css</th>
</tr>
</tfoot>
</table>
برای هر ستون از این جدول عرضی در نظر گرفته شده است. اگر این کار انجام نشود به صورت خودکار به تمام ستونها عرض داده می‌شود.
داده هایی که باید در بدنه جدول قرار بگیرند، در یک فایل متنی روی سرور قرار دارند. محتویات این فایل چیزی شبیه زیر است:
{
"aaData": [
{"engine":"Trident", "browser":"Internet Explorer 4.0", "platform":"Win95+", "version":"4", "grade":"X"},
{"engine":"Trident", "browser":"Internet Explorer 5.0", "platform":"Win95+", "version":"5", "grade":"C"},
{"engine":"Trident", "browser":"Internet Explorer 5.5", "platform":"Win95+", "version":"5.5", "grade":"A"}
]
}
همان طور که مشاهده می‌کنید فرمت ذخیره داده‌ها در این فایل به صورت json
یا اشیاء جاوا اسکریپتی است. این اشیاء باید به خصوصیت aaData نسبت داده
شوند که در قسمت قبل راجع به آن توضیح دادیم. تعداد این اشیاء 57 تا بود که
برای سادگی بیشتر 3 تا از آنها را اینجا ذکر کردیم.
اسکریپتی که داده‌ها را از فایل متنی خوانده و آنها را در جدول قرار می‌دهد هم بدین صورت خواهد بود:
$(document).ready(function () {
$('#browsers-grid').dataTable({
"sAjaxSource": "datasource/objects.txt",
"bProcessing": true,
"aoColumns": [
{ "mDataProp": "engine" },
{ "mDataProp": "browser" },
{ "mDataProp": "platform" },
{ "mDataProp": "version" },
{ "mDataProp": "grade" }
]
});
});
شرح کد:
sAjaxSource : رشته
نوع داده ای که قبول می‌کند رشته ای و
بیان کننده آدرسی است که داده‌ها باید از آنجا دریافت شوند. در اینجا
داده‌ها در فایل متنی objects.txt در پوشه datasource قرار دارند.
bProcessing : بولین
نوع داده‌های قابل قبول این خصوصیت true
یا false هست و بیان کننده این است که یک پیغام loading تا زمانی که
داده‌ها دریافت شوند و در جدول قرار بگیرند نمایش داده شوند یا خیر.
تنظیم کردن گزینه‌های اضافی دیگرsAjaxDataProp : رشته
همان طور که گفتیم در فایل متنی که حاوی اشیاء json بود ، این اشیاء را به
متغیری به اسم aaData منتسب کردیم. این نام را می‌توان تغییر داد مثلا فرض
کنید در فایل متنی داده‌ها به متغیری به اسم data منتسب شده اند:
{
"data": [
{"engine":"Trident", "browser":"Internet Explorer 4.0", "platform":"Win95+", "version":"4", "grade":"X"},
{"engine":"Trident", "browser":"Internet Explorer 5.0", "platform":"Win95+", "version":"5", "grade":"C"},
{"engine":"Trident", "browser":"Internet Explorer 5.5", "platform":"Win95+", "version":"5.5", "grade":"A"}
]
}
در این صورت باید خصوصیت sAjaxDataProp را به همان نامی که در فایل متنی
مشخص کرده اید مقداردهی کنید، در غیر این صورت داده‌های جدول هیچ گاه
بارگذاری نخواهند شد. بدین صورت:
یا اگر داده‌ها را بدین صورت در فایل متنی ذخیره کرده اید:
{ "data": { "inner": [...] } }
آنگاه خصوصیت sAjaxDataProp بدین صورت مقداردهی خواهد شد:
"sAjaxDataProp": "data.inner"
: رشته
نحوه صفحه بندی و حرکت بین صفحات مختلف را بیان می‌کند. اگر با
two_buttonمقدار دهی شود (مقدار پیش فرض) حرکت بین صفحات مختلف به وسیله
دکمه‌های Next و Previous امکان پذیر خواهد بود. اگر با full_numbersمقدار
دهی شود حرکت بین صفحات با دکمه‌های Next و Previous ، و همچنین دکمه‌های
First و Last و نیز شماره صفحه فعلی و دو صفحه بعدی و دو صفحه قبلی قابل
انجام است.
شکل الف) صفحه بندی به صورت full_numbers
bLengthChange: بولین
بیان می‌کند کاربر بتواند اندازه صفحه را تغییر دهید یا نه. به صورت پیش فرض
این گزینه true است. اگر آن به false مقدار دهی شود لیست بازشونده مربوط به
اندازه صفحه مخفی خواهد شد.
aLengthMenu : آرایه یک بعدی یا دو بعدی
به صورت پیش فرض در لیست باز شونده مربوط به تعداد رکوردهای قابل نمایش در هر صفحه اعداد 10 ، 25 ، 50 ، و 100 قرار دارند.
شکل ب ) لیست بازشونده شامل اندازه‌های صفحه
در صورتی که بخواهیم این گزینه‌ها را تغییر دهیم باید خصوصیت aLengthMenu
را مقدار دهی کنیم. اگر مقداری که به این خصوصیت می‌دهیم یک آرایه یک بعدی
باشد، مثلا
"aLengthMenu": [25, 50, 100, -1],
نتیجه یک لیست باز شوند است که دارای چهار عنصر است که value و text
آنها یکی است. (نکته: چهارمین عنصر از لیست بالا دارای مقدار 1- خواهد بود
که با انتخاب این گزینه تمام رکوردها نمایش می‌یابند). اما اگر می‌خواهیم
که text و value این عناصر با هم فرق کند از یک آرایه دو بعدی استفاده
خواهیم کرد، مثلا:
"aLengthMenu": [[25, 50, 100, -1], ["همه", "صد", "پنجاه", "بیست و پنج"]],
iDisplayLength: عدد صحیح
تعداد رکوردهای قابل نمایش در هر صفحه هنگامی که داده‌ها در جدول ریخته
می‌شوند را معین می‌کند. می‌توانید این را مقداری بدهید که در خصوصیت
aLengthMenu ذکر نشده است، مثلا 28 تا.
sDom : رشته
پلاگین DataTables به صورت پیش فرض لیست بازشونده اندازه صفحه و کادر متن
مربوط به جستجو را در بالای جدول داده‌ها اضافه می‌کند، و نیز اطلاعات دیگر
و همچنین امکانات مربوط به صفحه بندی را به قسمت پایین جدول اضافه می‌کند.
شما می‌توانید موقعیت این عناصر را با استفاده از پارامتر sDom تغییر
دهید.
نحو (syntax) مقداری که پارامتر sDom قبول می‌کند مقداری عجیب و غریب است، مثلا:
'<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>'
این خط بیان می‌کند که در قسمت بالای جدول یک تگ div با کلاس top
قرار بگیرد. در این تگ قسمت اطلاعات (یعنی Showing x to xx from xxx
entries) (با حرف i) ، کادر جستجو (با حرف f) ، لیست بازشونده مربوط به
اندازه صفحه (با حرف l) ، و نیز قسمت صفحه بندی (با حرف p)قرار خواهند
گرفت. در انتهای تگ div با کلاس top، یک تگ div با کلاس clear قرار خواهد
گرفت. بعد قسمت مربوط به پیغام loading (با حرف r) و بعد با حرف t جدول
حاوی داده‌ها قرار می‌گیرد. در نهایت یک تگ div با کلاس bottom قرار می‌گیرد
و با حرفهای i ، و f ، و l و p درون آن قسمتهای اطلاعات ، کادرجستجو، لیست
بازشونده اندازه صفحه و نیز قسمت صفحه بندی قرار خواهد گرفت و در نهایت یک
تگ div با کلاس clear قرار خواهد گرفت.
حرفهایی که در sDom معنی خاصی می‌دهند :
- l سر حرف Length Changing برای لیست بازشونده مربوط به اندازه صفحه
- f سر حرف Filtering input برای قسمت کادر جستجو
- t سرحرف table برای جدول حاوی داده ها
- i سر حرف information برای قسمت Showing x to xx from xxx entries
- p سر حرف pagination برای قسمت صفحه بندی
- r حرف دوم pRocessing برای قسمت پیغام قبل از بار کردن داده‌های جدول (قسمت loading)
- H و F که مربوط به themeهای jQuery UI می‌شوند که بعدا درباره آنها توضیح داده می‌شود.
همچنین بین علامت‌های کوچکتر (>) و بزرگتر (<) یعنی اگر چیزی
بیاید در یک تگ div قرار خواهد گرفت. اگر بخواهیم div ی بسازیم و به آن
کلاس بدهیم از نحو زیر استفاده خواهیم کرد:
و اگر بخواهیم یک تگ div با یک id مشخص بسازیم از نحو زیر استفاده خواهیم کرد:
در نهایت جدولی مثل جدول زیر تولید خواهد شد:
شکل ج) جدول نهایی تولید شده توسط DataTables
کدهای نهایی این مثال را از
DataTables-DoteNetTips-Tutorial-03.zip دریافت کنید.
