با کمک این کتابخانه‌ی جاوااسکریپت می‌توانید فهرست‌های بلند را به صورت خودکار صفحه‌بندی کنید. این کتابخانه تمامی وظایف صفحه‌بندی و قالب‌بندی اطلاعات را بر عهده می‌گیرد. تنها بخشی که لازم است توسط برنامه‌نویس به صورت جداگانه کدنویسی شود، بخش بازخوانی اطلاعات است که می‌تواند از پایگاه داده یا هر منبع دیگر به انجام برسد.

شیوه‌ی تعامل این کتابخانه با سرور بر اساس استاندارد صفحه‌بندی در فریم‌ورک Laravel طراحی شده است

ویژگی‌ها

• الگوریتم هوشمند و اختصاصی برای نمایش شماره‌ی صفحات
• امکان پر کردن سفارشی سلول‌ها توسط تابع callback
• بدون وابستگی به کتابخانه‌های جانبی مانند jQuery و عدم ایجاد تداخل در عملکرد این کتابخانه‌ها
• قابلیت به‌کارگیری چندین جدول به طور همزمان در یک صفحه
• پشتیبانی همزمان از لیست‌های چپ به راست( LTR ) و لیست‌های راست به چپ( RTL )
• توانایی بازخوانی داده‌های پیشرفته‌ی تو در تو
• تغییر ظاهر جدول کاملا با استفاده از شیوه‌نامه‌های CSS
• سازگاری با انواع مرورگرهای مدرن موجود
• کدنویسی استاندارد مطابق با آخرین استانداردهای جاوااسکریپت و HTML5
• مصرف حافظه‌ی کم و سرعت بالا
• حجم کتابخانه کمتر از ۶ کیلوبایت

سمت سرور

این اسکریپت برای دریافت اطلاعات از سمت سرور بر پایه‌ی استاندارد صفحه‌بندی فریم‌ورک لاراول عمل می‌کند. تنها پارامتر ارسال شده از سمت کامپوننت به سرور، «page» نام دارد. برای ایجاد اطلاعات استاندارد برای ارسال به کامپوننت از نمونه‌ی php که کنار بسته‌ی دانلودی موجود است هم می‌توانید کمک بگیرید.

{
	"total":100,
	"per_page":10,
	"current_page":1,
	"last_page":10,
	"from":1,
	"to":10,
	"data":[
		{"id":1 /* , ... */ },
		{"id":2 /* , ... */ }
		/* ... */
	]
}

روش استفاده

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

<script src="amib-ajax-list.min.js"></script>
<link rel="stylesheet" href="amib-ajax-list.css">

یک عنصر table به عنوان محل اصلی قرار گیری محتوا ایجاد کنید

<table id="main-table" class="amib-ajax-list rtl">
...
</table>

یک عنصر div به عنوان محل قرارگیری شماره‌ی صفحه‌ها ایجاد کنید

<div id="paging-div" class="amib-ajax-list-paging">
...
</div>

یک فایل تحت وب ایجاد کنید که درخواست محتوای صفحات را پاسخ بدهد
شیوه‌نامه‌ی CSS را مطابق نیاز تغییر دهید تا جدول به شکل دلخواه شما نمایش داده شود

مطابق مثال موجود در بسته سازنده‌ی جدول را فراخوانی کنید
پارامترهای سازنده را در کد زیر مشاهده می‌کنید

var my_list = new AMIB.ajaxList(
	table_id,
	paging_id,
	options,
	translations /* optional */
);
 
// table_id: شناسه‌ی جدول
// paging_id: شناسه‌ی محل قرارگیری شماره‌ها
// options: تنظیمات جدول
// translations: متن‌های ترجمه شده برای استفاده در کامپوننت

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

درج مقدار «rtl» یا «ltr» در فهرست classهای جدول اصلی، سبب راست به چپ یا چپ به راست شدن جدول می‌شود.
این ویژگی علاوه بر شیوه‌نامه‌ی css اصلی، در کامپوننت هم استفاده می‌شود و در لیست‌های راست به چپ، شماره‌ی عدد صفحه‌ها به صورت فارسی درج می‌شود

هنگامی که کامپوننت در حال دریافت اطلاعات از سرور باشد، کلاس «loading» روی جدول اعمال می‌شود
با کمک این ویژگی می‌توانید هرگونه که مایل باشید، کاربر را این موضوع باخبر کنید

راهنمایی در استفاده از options

دو ویژگی در پارامتر options اجباری است. نخست «cols» که آرایه‌ای حاوی ستون‌های موردنیاز در جدول است و سپس «url» که نشانی فایل سمت سرور است. پارامتر «page» به صورت خودکار به این نشانی اضافه خواهد شد. ممکن است برای جلوگیری از Cache شدن اطلاعات، پارامترهای دیگری هم به نشانی افزوده شود.

راهنمایی در استفاده از پارامتر cols در options

این پارامتر آرایه‌ای است که به ترتیب نام فیلدهای نمایش داده شده در جدول را مشخص می‌کند.
چنانچه داده‌های ارسالی از سمت سرور چند بعدی باشند، با استفاده از علامت نقطه می‌توان به زیرمجموعه‌های یک فیلد دسترسی پیدا کرد. برای مثال «child.name» ویژگی name از شیء child را در ستون دلخواه قرار می‌دهد.
در صورت نیاز به پر کردن سفارشی هر یک از سلول‌های جدول می‌توانید به جای وارد کردن نام فیلد مورد نظر، نام تابعی را در آرایه قرار دهید. هنگامی که کتابخانه بخواهد سلول مورد نظر شما را پر کند، تابع callback با پارامترهای موردنیاز فراخوانی می‌شود و با کدنویسی تابع callback می‌توانید محتوای سفارشی خود را درون سلول قرار دهید.
علاوه بر استفاده از تابع به عنوان مقدار ستون، عبارت «ROW» هم چنانچه در داده‌های ارسال شده از سرور موجود نباشد، به عنوان شماره‌ی ردیف و به صورت خودکار مقداردهی می‌شود.
برای روشن‌تر شدن موضوع به مثال پیشرفته‌ی همراه بسته و قطعه کد زیر توجه کنید:

function my_callback_function( cell, item, col_index, caller ) {
	// cell : سلول ایجاد شده برای پر کردن محتوا به صورت اختیاری
	// item : ردیف مورد نظر از شیء ایجاد شده در سمت سرور
	// col_index : شماره‌ی ستون مورد نظر در جدول
	// caller : دسترسی به متغیر جدول برای فراخوانی اطلاعات یا ارسال دستورها
 
	alert( item.row );
	alert( item.name );
}
 
var my_list = new AMIB.ajaxList(
	'my-table',
	'my-div',
	{
		cols: [ 'ROW', 'name', 'child.name', my_callback_function ],
		url: 'ajax.php'
	}
);

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

دموی آنلاین

برای مشاهده‌ی دموی پیشرفته به صورت آنلاین اینجا کلیک کنید

دریافت

– نگارش ۰.۴بتا – ۲۱ آذر ۱۳۹۲
برای دانلود بسته به همراه مثال اینجا کلیک کنید