JQuery Bootgrid styling how to override css class
I would like to override a specific style parameter for the jQuery Bootgrid - however I cannot do that. The documentation does not provide an example, it only states: "All CSS classes can be set and redefined on initialization accordingly." and shows a list of style elements that can be overridden.
http://www.jquery-bootgrid.com/Documentation#styling
I've tried the following:
$('#divMain').bootgrid({
styling: {
pagination: 'pagination pagination-sm'
}
});
but without success.
Does anyone know how to achieve this?
source to share
The property must be css
notstyling
$('#divMain').bootgrid({
css: {
pagination: 'pagination pagination-sm'
}
});
$("#grid-basic").bootgrid({
css: {
pagination: 'pagination pagination-sm'
}
});
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.2.0/jquery.bootgrid.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.2.0/jquery.bootgrid.js"></script>
<table id="grid-basic" class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th data-column-id="id" data-type="numeric">ID</th>
<th data-column-id="sender">Sender</th>
<th data-column-id="received" data-order="desc">Received</th>
</tr>
</thead>
<tbody>
<tr>
<td>10238</td>
<td>eduardo@pingpong.com</td>
<td>14.10.2013</td>
</tr>
<tr>
<td>10243</td>
<td>eduardo@pingpong.com</td>
<td>19.10.2013</td>
</tr>
<tr>
<td>10248</td>
<td>eduardo@pingpong.com</td>
<td>24.10.2013</td>
</tr>
<tr>
<td>10253</td>
<td>eduardo@pingpong.com</td>
<td>29.10.2013</td>
</tr>
<tr>
<td>10234</td>
<td>lila@google.com</td>
<td>10.10.2013</td>
</tr>
<tr>
<td>10239</td>
<td>lila@google.com</td>
<td>15.10.2013</td>
</tr>
<tr>
<td>10244</td>
<td>lila@google.com</td>
<td>20.10.2013</td>
</tr>
<tr>
<td>10249</td>
<td>lila@google.com</td>
<td>25.10.2013</td>
</tr>
<tr>
<td>10237</td>
<td>robert@bingo.com</td>
<td>13.10.2013</td>
</tr>
<tr>
<td>10242</td>
<td>robert@bingo.com</td>
<td>18.10.2013</td>
</tr>
<tr>
<td>10247</td>
<td>robert@bingo.com</td>
<td>23.10.2013</td>
</tr>
<tr>
<td>10252</td>
<td>robert@bingo.com</td>
<td>28.10.2013</td>
</tr>
<tr>
<td>10236</td>
<td>simon@yahoo.com</td>
<td>12.10.2013</td>
</tr>
<tr>
<td>10241</td>
<td>simon@yahoo.com</td>
<td>17.10.2013</td>
</tr>
<tr>
<td>10246</td>
<td>simon@yahoo.com</td>
<td>22.10.2013</td>
</tr>
<tr>
<td>10251</td>
<td>simon@yahoo.com</td>
<td>27.10.2013</td>
</tr>
<tr>
<td>10235</td>
<td>tim@microsoft.com</td>
<td>11.10.2013</td>
</tr>
<tr>
<td>10240</td>
<td>tim@microsoft.com</td>
<td>16.10.2013</td>
</tr>
<tr>
<td>10245</td>
<td>tim@microsoft.com</td>
<td>21.10.2013</td>
</tr>
<tr>
<td>10250</td>
<td>tim@microsoft.com</td>
<td>26.10.2013</td>
</tr>
</tbody>
</table>
source to share
The navigation bar (or pagination if you like) is made up of button elements that are styled through the paginationButton css property.
Instead:
$('#divMain').bootgrid({
styling: {
pagination: 'pagination pagination-sm'
}
});
Please try the following:
$('#divMain').bootgrid({
css: {
paginationButton: 'btn-sm'
}
});
And for additional settings:
$('#divMain').bootgrid({
css: {
paginationButton: 'btn-info btn-sm'
}
});
However, you will notice that for this last example, the appearance of buttons on mouseover is not the same. It may need some CSS improvement, otherwise ...
source to share