I tried this workaround : JqGrid pager button moves on hover
But it's not working for me.
I'm using the basic Accordion theme that I've changed to fit my needs. I'm working with local datas (if it matter).
I also tried a full fresh install of JqGrid but the behavior is still the same. downloaded from here : https://guriddo.net/?page_id=103292
Tested on Safari and Firefox so it's not a matter of browser .
Here is my Html /JS script just in case :
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" />
<!-- The jQuery library is a prerequisite for all jqSuite products -->
<script type="text/ecmascript" src="{% static 'js/jquery.min.js'%}"></script>
<!-- Language set We support more than 40 localizations -->
<script type="text/ecmascript" src="{% static 'js/trirand/i18n/grid.locale-en.js'%}"></script>
<!-- This is the Javascript file of jqGrid -->
<script type="text/ecmascript" src="{% static 'js/trirand/jquery.jqGrid.min.js'%}"></script>
<link type="text/css" rel="stylesheet" media="screen" href="{% static 'css/trirand/ui.jqgrid.css'%}" />
<!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
<link rel="stylesheet" type="text/css" media="screen" href="{% static 'css/jquery-ui.css'%}" />
<!-- The link to the CSS that the grid needs -->
<link rel="stylesheet" type="text/css" media="screen" href="{% static 'css/trirand/ui.jqgrid.css'%}" />
</head>
<body>
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
<script type="text/javascript">
var MaingridQueryResults_1 = {{available_lessons|safe}};
var SubgridQueryResults_1 = {{subavailable_lessons|safe}};
// Main grid
$("#jqGrid").jqGrid({
datatype: 'local',
data: MaingridQueryResults_1,
colModel: [
{name: 'id', label: 'id'},
{name: 'first_name', label: 'first_name'},
{name: 'last_name', label: 'last_name'},
{name: 'email', label: 'email'},
{name: 'phone', label: 'phone'},
{name: 'address', label: 'address'},
{name: 'city', label: 'city'},
{name: 'state', label: 'state'},
{name: 'zipcode', label: 'zipcode'},
{name: 'regarde', label: 'regarde'}
],
width: 900,
height: 300,
pager: "#jqGridPager",
//toppager: true,
rowNum: 20,
rowList : [20,30,50],
viewrecords: true,
altRows: true,
rownumbers: true,
rownumWidth: 25,
multiselect: true,
multiboxonly: true,
//multikey:"shiftKey",
ondblClickRow: function (rowid) {
var rowData = $(this).getRowData(rowid);
document.location.href = "../record/" + rowData['id']
},
loadComplete: function () {
$(this).find(">tbody>tr.jqgrow:visible:odd").addClass("strippedAltRows");
},
subGrid: false,
isHasSubGrid : function(ids) {
var ret = false;
for(var i = 0; i < SubgridQueryResults_1.length; i++) {
if(SubgridQueryResults_1[i].id == ids) {// change .id to name of object you want (idcontact ?)
ret = SubgridQueryResults_1[i];
return ret
break;
}
}
return ret;
},
subGridRowExpanded: function (subgridDivId, rowId) {
//console.log("rows " + rowId)
for (var i = 0; i < SubgridQueryResults_1.length; i++) {
//console.log("Sub id " + SubgridQueryResults_1[i].id)
if (SubgridQueryResults_1[i].id == rowId) {// change .id to name of object you want (idcontact ?)
//console.log("loop inside subav " + SubgridQueryResults_1[i].id)
var treza = SubgridQueryResults_1.filter(element => element.id == [rowId]) // change .id to name of object you want (idcontact ?)
//console.log("treza " + JSON.stringify(treza))
}
}
//console.log("subgridivid " +subgridDivId)
var subgridTableId = subgridDivId + "_t";
$("#" + subgridDivId).html("<table id='" + subgridTableId + "'></table>");
// Subgrid
$("#" + subgridTableId).jqGrid({
datatype: 'local',
data: treza,
colModel: [
{name: 'id', label: 'id'},
{name: 'first_name', label: 'first_name'},
{name: 'last_name', label: 'last_name'},
{name: 'email', label: 'email'},
{name: 'phone', label: 'phone'},
{name: 'address', label: 'address'},
{name: 'city', label: 'city'},
{name: 'state', label: 'state'},
{name: 'zipcode', label: 'zipcode'},
{name: 'regarde', label: 'regarde'}
],
multiselect: true,
multiboxonly: true,
multikey:"shiftKey",
});
}
});
// color of bottom pager
//$("#jqGridPager").css("background", "white")
//$("#jqGridPager").css("color", "black")
// color of altrow
//$("tr.jqgrow:odd").css("background", "#DDDDDC");
</script>
</body>
</html>