simple script to apply bootstrap pagination style in asp.net gridview

Question

is there any simple jquery script/plugin to apply bootstrap pagination style in asp.net gridview ? I've found some good tips about how to do this, like these links: here and here. the only problem with these tips/solutions is we need to make a lot of changes to achieve the result and this is not preferable when you have large application and you want to transform it to bootstrap style. we need another solution. like a simple jquery script that can do the job without making lot changes to the current code.

Answer 1

I've made simple jquery script to apply the bootstrap pagination in asp.net gridview and I think it will be useful to share it here in stackoverflow. source code of this script is hosted in github here.

usage is very simple:

-include the plugin js file in your asp.net page file:

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

-set gridview property:

PagerStyle-CssClass="bs-pagination"

that's is all you need to apply bootstrap pagination style in asp.net gridview.

check my blog for more info.

Edit:

about the problem when using gridview inside UpdatePanel, 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)
    });
});