1. Blogs
  2. Issam Ali's blog
  3. apply bootstrap pagination style in asp.net gridview

apply bootstrap pagination style in asp.net gridview

Submitted by Issam Ali on Fri, 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 . إلى الصفحة كما يلي:

<script type="text/javascript" src="js/bs.pagination.js"></script>



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

PagerStyle-CssClass="bs-pagination"

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

Articles Categories: 
asp.net
bootstrap
jquery
javascript

Comments

Submitted by Anonymous (not verified) on Tue, 06/10/2014 - 15:57

Thanks for your code.
I changed it some and I figured I would pay you back with my changes.
With your code, the left side borders have no radius since an empty LI gets created with the initial UL creation in jquery.

So instead of building a UL and adding to it, just build the entire HTML and build it at once.
-----------------------------------------------------------------------------------------------

$(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);
}

Submitted by Issam Ali on Thu, 06/19/2014 - 15:43

thank you, sharp eyes! updated.

Submitted by John Croson (not verified) on Sun, 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.

Submitted by naterackers (not verified) on Wed, 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

Submitted by Issam Ali on Thu, 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.

Submitted by Anonymous (not verified) on Thu, 10/30/2014 - 08:01

Good article but how can we make pagination direciton:rtl; i did try but not working. could you plz tell me.
Thanks

Submitted by Issam Ali on Thu, 10/30/2014 - 18:39

check this github project it works well for me.

Add new comment