apply bootstrap pagination style in asp.net gridview

 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: 

Comments

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

thank you, sharp eyes! updated.

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.

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

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.

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

check this github project it works well for me.

Add new comment