3

i would like to override a specific style setting for the jQuery Bootgrid - however i cannot seem to do this. The documentation does not provide an example, it only states "All CSS classes can be set and overridden on initialization respectively." and shows a list of styling elements that can be overridden.

http://www.jquery-bootgrid.com/Documentation#styling

i have tried the following:

$('#divMain').bootgrid({
  styling: {
      pagination: 'pagination pagination-sm'
  }
});

but to no success.

Does anyone know how to achieve this?

Pinpoint Solutions
  • 124
  • 2
  • 11

2 Answers2

1

The property should be css not styling

$('#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>
Arun P Johny
  • 384,651
  • 66
  • 527
  • 531
0

The navigation (or pagination, if you like) bar is made of button elements whose style is handled through the paginationButton css property.

Instead of:

$('#divMain').bootgrid({
    styling: {
    pagination: 'pagination pagination-sm'
    }
});

Please, try this:

$('#divMain').bootgrid({
    css: {
        paginationButton: 'btn-sm'
    }
});

And for more settings:

$('#divMain').bootgrid({
    css: {
        paginationButton: 'btn-info btn-sm'
    }
});

However, you will notice that for this last example, the buttons appearance on mouse hover is not as desired. It might need some css improvement or else...

zinczinc
  • 544
  • 5
  • 11