In this article, we will explore an example of using JQGrid with Bootstrap and jQuery UI to create a dynamic and responsive data grid.
We’ll create an awesome and enhanced UI of the jQgrid table grid. I already shared Simple listing of records Using jQuery jQgrid and AJAX tutorial but this jqgrid tutorial is an extended version of that tutorial.
What’s jQgrid
jQgrid is a popular jQuery grid plugin to show records in the table listing. It offers various functionalities such as sorting, filtering, pagination, and inline editing, making it a popular choice for creating interactive data grids.
Styling of jQgrid Table
I have added some custom CSS classes to create a beautiful grid listing.
Please have a look UI of new jQgrid Table listing,
Simple jQgrid example of listing with Bootstrap and jQuery UI
This tutorial help to create beautiful UI of jQgrid using some custom css. I am using jQgrid, jQuery UI and bootstrap.We will also use google font for styling font in table content.
You can also check other tutorials of table plugin,
- jQuery jqGrid Example with JSON Data Using Rest Service
- jQgrid Add,edit and Delete Record Example with Demo Using Restful Web Services
- Datatables Example with JSON Data Using Rest WebService
- Simple Example and Use of jQuery Flexigrid
- Best Free jQuery Table and Grid Plugins
Here, I am creating a simple listing of data with pagination using HTTP GET rest service. I am using a sample rest service to get JSON data and passed to jQgrid instance. I have added pagination and sorting on table listing with some custom pagination nav icons.
Step 1: Make sure you have the necessary dependencies installed. You will need jQuery, jQuery UI, Bootstrap, and the JQGrid plugin. You can include these dependencies by adding the following CDN links into head section of index.html file.
<!-- jQuery --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- jQuery UI --> <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script> <!-- Bootstrap --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> <!-- JQGrid --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.7/css/ui.jqgrid.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.7/jquery.jqgrid.min.js"></script>
Step 2: Let’s create the HTML structure for our JQGrid example. We will define a <div> element with an id to hold the grid and a table element inside it. Added the below code in index.html file.
<div id="gridContainer"> <table id="grid-table"></table> <div id="grid-pager"></div> </div>
I am taking #grid-table for table and #grid-pager for pagination container.
Step 3: We will use the $("#grid").jqGrid() method to configure the grid options and load data into it. We fetched data from the rest web service and passed data to jqGrid.
$(document).ready(function(){
var grid_selector = "#grid-table";
var pager_selector = "#grid-pager";
jQuery(grid_selector).jqGrid({
url:'https://jsonplaceholder.typicode.com/posts',
datatype: "json",
height: 450,
colNames:['ID', 'User ID','Title','Body'],
colModel:[
{name:'id',label:'ID', width:55},
{name:'userId',label:'UserID', width:95},
{name:'title',label:'Title', width:300},
{name:'body',label:'Body', width:400, sortable:false}
],
loadonce: true,
rowNum:10,
rowList:[10,20,30],
pager : pager_selector,
altRows: true,
multiselect: true,
multiboxonly: true,
caption: "jqGrid with listing",
loadComplete : function() {
var table = this;
setTimeout(function(){
updatePagerIcons(table);
}, 0);
}
});
});
in this code snippet, we configure the JQGrid options using the colModel property. Each object in the colModel array represents a column in the grid and contains properties like name, label, and width
I am passing JSON data to jQgrid using the rest service. I am loading all JSON data at once and will do pagination on the client side.
I am customizing pagination icons using updatePagerIcons() method and passed table instance. We will define updatePagerIcons method and set custom pagination icons like, next, prev etc.
You can configure column display text, width and sortable properties. I am using sortable:false on the body column so that the body column is not sortable.
Step 4: Create updatePagerIcons method and set page icons.
function updatePagerIcons(table) {
var replacement =
{
'ui-icon-seek-first' : 'ace-icon fa fa-angle-double-left bigger-140',
'ui-icon-seek-prev' : 'ace-icon fa fa-angle-left bigger-140',
'ui-icon-seek-next' : 'ace-icon fa fa-angle-right bigger-140',
'ui-icon-seek-end' : 'ace-icon fa fa-angle-double-right bigger-140'
};
$('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){
var icon = $(this);
var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
})
}
Step 5: Created custom css class to enhance jQgrid UI.
<style style="text/css">
.ui-jqgrid .ui-jqgrid-view {
z-index: auto;
}
.ui-jqgrid .ui-jqgrid-view, .ui-jqgrid .ui-paging-info, .ui-jqgrid .ui-pg-selbox, .ui-jqgrid .ui-pg-table {
font-size: 13px;
}
.ui-jqgrid .ui-jqgrid-title {
float: left;
margin: 8px;
}
.ui-jqgrid .ui-jqgrid-title-rtl {
float: right;
margin: 8px;
}
.ui-jqgrid-view>.ui-jqgrid-titlebar {
height: 40px;
line-height: 24px;
color: #FFF;
background: #307ECC;
padding: 0;
font-size: 15px;
}
.ui-jqgrid tr.jqgrow.ui-row-rtl td:last-child {
border-right: none;
border-left: 1px solid #E1E1E1;
}
.ui-jqgrid .ui-jqgrid-hdiv {
background-color: #EFF3F8;
border: 1px solid #D3D3D3;
border-width: 1px 0 0 1px;
line-height: 15px;
font-weight: 700;
color: #777;
text-shadow: none;
}
.ui-jqgrid .ui-jqgrid-htable thead {
background-color: #EFF3F8;
}
.ui-jqgrid .ui-jqgrid-htable th span.ui-jqgrid-resize {
height: 45px!important;
}
.ui-jqgrid .ui-jqgrid-htable th div {
padding-top: 12px;
padding-bottom: 12px;
overflow: visible;
}
.ui-jqgrid-hdiv .ui-jqgrid-htable {
border-top: 1px solid #E1E1E1;
}
.ui-jqgrid-titlebar {
position: relative;
top: 1px;
z-index: 1;
}
.ui-jqgrid tr.jqgrow, .ui-jqgrid tr.ui-row-ltr, .ui-jqgrid tr.ui-row-rtl {
border: none;
height:auto;
overflow:hidden;
padding-right:4px;
padding-top:2px;
position:relative;
vertical-align:text-top;
white-space:normal !important;
}
.ui-jqgrid tr.ui-row-ltr td, .ui-jqgrid tr.ui-row-rtl td {
border-bottom: 1px solid #E1E1E1;
padding: 6px 4px;
border-color: #E1E1E1 !important;
white-space: normal !important;
height:auto;
vertical-align:text-top;
padding-top:2px;
}
.ui-jqgrid tr.ui-state-highlight.ui-row-ltr td {
border-right-color: #C7D3A9;
}
.ui-jqgrid tr.ui-state-highlight.ui-row-rtl td {
border-left-color: #C7D3A9;
}
.ui-jqgrid-btable .ui-widget-content.ui-priority-secondary {
background-image: none;
background-color: #F9F9F9;
opacity: 1;
}
.ui-jqgrid-btable .ui-widget-content.ui-state-hover {
background-image: none;
background-color: #EFF4F7;
opacity: 1;
}
.ui-jqgrid-btable .ui-widget-content.ui-state-highlight {
background-color: #E4EFC9;
}
.ui-jqgrid .ui-jqgrid-pager {
line-height: 15px;
height: 55px;
padding-top: 10px!important;
padding-bottom: 10px!important;
background-color: #EFF3F8!important;
border-bottom: 1px solid #E1E1E1!important;
border-top: 1px solid #E1E1E1!important;
}
.ui-jqgrid .ui-pg-input {
font-size: inherit;
width: 24px;
height: 20px;
line-height: 16px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
text-align: center;
padding-top: 1px;
padding-bottom: 1px;
}
.ui-jqgrid .ui-pg-selbox {
display: block;
height: 24px;
width: 60px;
margin: 0;
padding: 1px;
line-height: normal;
}
.ui-jqgrid .ui-pager-control {
height: 50px;
position: relative;
padding-left: 9px;
padding-right: 9px;
}
.ui-jqgrid .ui-jqgrid-toppager {
height: auto!important;
background-color: #EFF3F8;
border-bottom: 1px solid #E1E1E1!important;
}
.ui-pg-table .navtable .ui-corner-all {
border-radius: 0;
}
.ui-jqgrid .ui-pg-button .ui-separator {
margin-left: 4px;
margin-right: 4px;
border-color: #C9D4DB;
}
.ui-jqgrid .ui-jqgrid-btable {
border-left: 1px solid #E1E1E1;
}
.ui-jqgrid .ui-jqgrid-bdiv {
border-top: 1px solid #E1E1E1;
overflow-x: hidden;
}
.ui-jqgrid .loading {
position: absolute;
top: 45%;
left: 45%;
width: auto;
height: auto;
z-index: 111;
padding: 6px;
margin: 5px;
text-align: center;
font-weight: 700;
font-size: 12px;
background-color: #FFF;
border: 2px solid #8EB8D1;
color: #E2B018;
}
.ui-jqgrid .ui-jqgrid-labels {
border-bottom: none;
background: repeat-x #F2F2F2;
background-image: -webkit-linear-gradient(top, #F8F8F8 0, #ECECEC 100%);
background-image: -o-linear-gradient(top, #F8F8F8 0, #ECECEC 100%);
background-image: linear-gradient(to bottom, #F8F8F8 0, #ECECEC 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff8f8f8', endColorstr='#ffececec', GradientType=0);
padding: 0!important;
border-left: 1px solid #E1E1E1!important;
}
.ui-jqgrid .ui-jqgrid-labels th {
border-right: 1px solid #E1E1E1!important;
text-align: left!important;
}
.ui-jqgrid-labels th[id*="_cb"]:first-child>div {
padding-top: 0;
text-align: center!important;
}
.ui-jqgrid-sortable {
padding-left: 4px;
font-size: 13px;
color: #777;
font-weight: 700;
}
.ui-jqgrid-sortable:hover {
color: #547EA8;
}
th[aria-selected=true] {
background-image: -webkit-linear-gradient(top, #EFF3F8 0, #E3E7ED 100%);
background-image: -o-linear-gradient(top, #EFF3F8 0, #E3E7ED 100%);
background-image: linear-gradient(to bottom, #EFF3F8 0, #E3E7ED 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeff3f8', endColorstr='#ffe3e7ed', GradientType=0);
}
th[aria-selected=true] .ui-jqgrid-sortable {
color: #307ECC;
}
.ui-jqgrid .ui-icon {
text-indent: 0;
color: #307ECC;
float: none;
right: 2px;
}
.rtl .ui-jqgrid .ui-icon {
right: auto;
left: 2px;
}
.ui-jqgrid .ui-icon.ui-state-disabled {
color: #BBB;
}
.ui-jqgrid .ui-icon.ui-state-disabled:hover {
padding: 0;
}
.ui-grid-ico-sort:before {
display: inline;
font-size: 12px;
}
.ui-icon-asc:before {
content: "\f0d8"}
.ui-pg-table>tbody>tr>.ui-pg-button>.ui-icon {
display: inline-block;
padding: 0;
width: 24px;
height: 24px;
line-height: 22px;
text-align: center;
position: static;
float: none;
margin: 0 2px!important;
color: grey;
border: 1px solid #CCC;
background-color: #FFF;
border-radius: 100%}
.ui-pg-table>tbody>tr>.ui-pg-button>.ui-icon:hover {
color: #699AB5;
border-color: #699AB5;
}
.ui-pg-table>tbody>tr>.ui-pg-button>.ui-icon:before {
width: 20px;
text-align: center;
display: inline-block;
}
.ui-pg-table>tbody>tr>.ui-pg-button.ui-state-disabled .ui-icon {
color: #B0B0B0;
background-color: #F7F7F7;
border-color: #DDD;
-moz-transform: scale(.9);
-webkit-transform: scale(.9);
-o-transform: scale(.9);
-ms-transform: scale(.9);
transform: scale(.9);
}
.ui-jqgrid-btable input, .ui-jqgrid-btable select, .ui-jqgrid-btable textarea {
padding: 2px;
width: auto;
max-width: 100%;
margin-bottom: 0;
}
.ui-jqgrid-btable select {
padding: 1px;
height: 25px;
line-height: 25px;
}
.ui-pg-div .ui-icon {
display: inline-block;
width: 18px;
float: none;
position: static;
text-align: center;
opacity: .85;
-webkit-transition: all .12s;
-o-transition: all .12s;
transition: all .12s;
margin: 0 1px;
vertical-align: middle;
cursor: pointer;
font-size: 17px;
}
.ui-pg-div .ui-icon:hover {
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
opacity: 1;
position: static;
margin: 0 1px;
}
.ui-pg-div .ui-icon:before {
font-family: FontAwesome;
display: inline;
}
.ui-jqgrid .ui-pg-button:hover, .ui-jqgrid .ui-state-disabled:hover {
padding: 0 1px;
border-style: none !important;
}
.ui-jqgrid .ui-pg-table .ui-pg-button.ui-state-disabled:hover>.ui-pg-div>.ui-icon, .ui-jqgrid .ui-pg-table .ui-pg-button.ui-state-disabled:hover>.ui-separator {
margin-left: 4px;
margin-right: 4px;
}
@media only screen and (max-width:767px) {
.ui-jqgrid .ui-jqgrid-pager {
height: 90px;
}
.ui-jqgrid .ui-jqgrid-pager>.ui-pager-control {
height: 85px;
padding-top: 10px!important;
}
.ui-jqgrid .ui-jqgrid-pager>.ui-pager-control>.ui-pg-table>tbody>tr>td {
vertical-align: top;
}
.ui-jqgrid .ui-jqgrid-pager>.ui-pager-control>.ui-pg-table>tbody>tr>td#grid-pager_center {
width: 0!important;
position: static;
}
.ui-jqgrid .ui-jqgrid-pager>.ui-pager-control>.ui-pg-table>tbody>tr>td#grid-pager_center>.ui-pg-table {
margin: 36px auto 0;
position: absolute;
right: 0;
left: 0;
text-align: center;
}
.ui-jqgrid .ui-jqgrid-pager .navtable {
height: auto;
}
}.dd
</style>
Conclusions:
In this article, we explored an example of using JQGrid with Bootstrap and jQuery UI to create a dynamic and responsive data grid. We covered the basic setup, initialization, data loading, and styling of the grid. You can create powerful and interactive grids in your web applications.
You can download source code and Demo from below link.
