I am facing a challenge in implementing a JQuery script on specific Gridviews within my page. The issue lies in the fact that the script is currently being applied to all Gridviews on the page, and I need a way to specify which grids it should apply to.
The Script I am utilizing was authored by Ryan Zielke.
$.fn.tablePagination = function (settings) {
var defaults = {
firstArrow: (new Image()).src = "./images/first.gif",
prevArrow: (new Image()).src = "./images/prev.gif",
lastArrow: (new Image()).src = "./images/last.gif",
nextArrow: (new Image()).src = "./images/next.gif",
rowsPerPage: 5,
currPage: 1,
optionsForRows: [5, 10],
ignoreRows: []
};
settings = $.extend(defaults, settings);
return this.each(function () {
var table = $(this)[0];
// Remaining code remains the same
})
};
})(jQuery);
The script is activated client side using the following function:
$('table').tablePagination({});
It also includes some CSS styling as shown below:
#testTable {
width : 300px;
margin-left: auto;
margin-right: auto;
}
// Additional CSS rules remain unchanged
To target a specific gridview, I have attempted the following modifications:
Changing the clientside script to:
$('#GridviewName').tablePagination({});
I also tried updating the script itself to target a particular class like this:
var possibleTableRows = $.makeArray($('.pagingclass tbody tr', table));
Here, I aimed to define a class and then assign that CSS class to the gridview in order to exclusively apply the script to that specific gridview. Unfortunately, these attempts did not yield the desired outcome.
I'm unsure of the best approach or if achieving this customization is feasible. Any guidance on this matter would be extremely valuable.