apply bootstrap pagination style in gridview

 bootstrap pagination in gridview

you can download this jquery plugin from github here.

هناك بعض الحلول والحيل لتطبيق ترقيم البوتستراب على مكون gridview في كما في الروابط التالية:

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

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

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

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


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

Articles Categories: 


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) {

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


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:

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


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) {

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) {

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.

check this github project it works well for me.

Add new comment