className in Datatable

Question

className in Datatable

Navigation

#1 by (0 votes)

1

Good first of all, I'm doing the Datatable example of showing additional data in a row. In the field of the image instead of using an external image I want to use the one that the jquery icons bring, so when I build my json object I put

<a src="" class="ui-icon ui-icon-circle-plus" />

and perfect but if I put it as a parameter of className it shows all the images of ui-icon.

{
    "data": null,
    "className": "ui-icon ui-icon-circle-plus",
    "orderable": false,
    "defaultContent": ''
}

What will I be doing wrong?

jquery datatables

asked by linurandy 06.10.2017 в 05:09

source

1 answer

Div does not imbibe css Connect to the google calendar API

score 0 · Answer 1

When loading the datatable, I access the column number that interests me, using the property createdRow .

The five in this case:

$('td', row).eq(5)

Once called (due to the laziness of not deleting them by hand) I empty the fields of that column and do a append inserting the html that interests you.

In our case:

<a src="" class="ui-icon ui-icon-circle-plus" />

Here's the example:

$(document).ready(function() {
    $('#example').DataTable( {
        "paging":   false,
        "ordering": false,
        "info":     false,
        "createdRow": function ( row, data, index ) {
            $('td', row).eq(5).text('');
            $('td', row).eq(5).append('<a src="" class="ui-icon ui-icon-circle-plus" />');
        }
    } );
} );

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
      <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>ICONO</th>
      </tr>
  </thead>
  <tfoot>
      <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>ICONO</th>
      </tr>
  </tfoot>
  <tbody>
      <tr>
          <td>Tiger Nixon</td>
          <td>System Architect</td>
          <td>Edinburgh</td>
          <td>61</td>
          <td>2011/04/25</td>
          <td>$320,800</td>
      </tr>
      <tr>
          <td>Garrett Winters</td>
          <td>Accountant</td>
          <td>Tokyo</td>
          <td>63</td>
          <td>2011/07/25</td>
          <td>$170,750</td>
      </tr>
      <tr>
          <td>Ashton Cox</td>
          <td>Junior Technical Author</td>
          <td>San Francisco</td>
          <td>66</td>
          <td>2009/01/12</td>
          <td>$86,000</td>
      </tr>
      <tr>
          <td>Cedric Kelly</td>
          <td>Senior Javascript Developer</td>
          <td>Edinburgh</td>
          <td>22</td>
          <td>2012/03/29</td>
          <td>$433,060</td>
      </tr>
      <tr>
          <td>Airi Satou</td>
          <td>Accountant</td>
          <td>Tokyo</td>
          <td>33</td>
          <td>2008/11/28</td>
          <td>$162,700</td>
      </tr>
  </tbody>
</table>