jQuery Bootgrid样式如何覆盖css类

Question

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?

Answer 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> 

Answer 2

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...