apply bootstrap pagination style in asp.net gridview

أضافه Issam Ali في جمعة, 03/14/2014 - 23:50

bootstrap pagination in asp.net gridview

you can download this jquery plugin from github here.

هناك بعض الحلول والحيل لتطبيق ترقيم البوتستراب على مكون gridview في asp.net كما في الروابط التالية:
http://www.programming-free.com/2013/07/bootstrap-pagination-for-aspnet-gridview.html http://csharpbits.notaclue.net/2013/08/adding-a-bootstrap-pagination-to.html

المشكلة في هذه الطرق أنها تحتاج إلى إجراء تعديلات في طريقة جلب البيانات أو إلى مكتبات (آسمبلي) خارجية. لذلك فكرت بطريقة تكون أسهل في التطبيق، فكتبت هذا السكريبت البسيط الذي سيقوم بكل ما هو مطلوب. قمت بتحميل السكريبت على github الذي يبدو أن له شعبية متزايدة بين المبرمجين هذه الأيام. يمكنك الحصول على هذه السكريبت هنا:
https://github.com/issamalidev/bs.pagination.js

الاستخدام
اضف سكريبت bs.pagination.js . إلى الصفحة كما يلي:

غير خاصية ال gridview كما يلي:

PagerStyle-CssClass="bs-pagination"

و هذا فقط هو كل ما تحتاجه للحصول على ترقيم البوتستراب في عنصر asp.net gridview .

Articles Categories:

$(document).ready(function () {
$('.bs-pagination td table').each(function (index, obj) {
convertToPagination(obj)
});
});

function convertToPagination(obj) {
var liststring = '<ul class="pagination">';

$(obj).find("tbody tr").each(function () {
$(this).children().map(function () {
liststring = liststring + "<li>" + $(this).html() + "</li>";
});
});
liststring = liststring + "</ul>";
var list = $(liststring);
list.find('span').parent().addClass('active');

$(obj).replaceWith(list);
}

رد

thank you, sharp eyes!

الرابط الثابت أضافه Issam Ali في خميس, 06/19/2014 - 15:43

thank you, sharp eyes! updated.

رد

Using solution inside UpdatePanel

الرابط الثابت أضافه John Croson (لم يتم التحقق) في أحد, 06/22/2014 - 01:38

I found your solution to be one of the easier ones to implement, but found if I used it inside an UpdatePanel to prevent full page postbacks the formatting was lost.

The solution provided here helped me: http://www.codeproject.com/Articles/534587/ASP-NET-jQuery-is-not-Working...

I added a function in your js that I could call using Sys.Application.add_load(jScript); inside the ContentTemplate of the UpdatePanel.

Regards.

رد

code example

الرابط الثابت أضافه naterackers (لم يتم التحقق) في أربعاء, 07/09/2014 - 03:01

John Croson, I'm having the same problem in the updatepanel as you had. Could you share the code you created to overcome the issue? thanks

رد

Re:code example

الرابط الثابت أضافه Issam Ali في خميس, 07/10/2014 - 20:01

The reason of this problem is because “UpdatePanel completely replaces the contents of the update panel on an update. This means that those events we subscribed to are no longer subscribed because there are new elements in that update panel.”
There is more than one solution to solve this problem:

Solution 1:
Use pageLoad() instead of $(document).ready. modify the code like this :

function pageLoad() {
$('.bs-pagination td table').each(function (index, obj) {
convertToPagination(obj)
});
}

Solution2:
re-change the style after every update. We can do this by adding these lines to the bs.pagination.js file:

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function () {
$('.bs-pagination td table').each(function (index, obj) {
convertToPagination(obj)
});
});

I'll update this post and the github readme file to include these solutions.