DataTables

DataTables Examples

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<table id="invoices-table" class="display table table-hover table-striped sortable-theme-bootstrap bordered" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>status</th>
            <th>name</th>
            <th>date</th>
            <th>email</th>
            <th>cost</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>status</th>
            <th>name</th>
            <th>date</th>
            <th>email</th>
            <th>cost</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>0</td>
            <td>Kareem</td>
            <td>09/25/2016</td>
            <td>diam.luctus.lobortis@fringillaeuismodenim.ca</td>
            <td>€110,788</td>
        </tr>
        <tr>
            <td>0</td>
            <td>Elmo</td>
            <td>07/06/2016</td>
            <td>ut.pellentesque.eget@tellusAeneanegestas.net</td>
            <td>€193,407</td>
        </tr>
        <tr>
            <td>0</td>
            <td>Thaddeus</td>
            <td>04/12/2017</td>
            <td>dictum.ultricies@atrisus.ca</td>
            <td>€140,784</td>
        </tr>
        <tr>
            <td>0</td>
            <td>Stewart</td>
            <td>03/05/2017</td>
            <td>tellus.id@viverraDonectempus.ca</td>
            <td>€164,200</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Tobias</td>
            <td>01/23/2018</td>
            <td>interdum.Nunc.sollicitudin@sem.co.uk</td>
            <td>€169,096</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Finn</td>
            <td>01/20/2017</td>
            <td>commodo.tincidunt@rutrum.edu</td>
            <td>€173,577</td>
        </tr>
        <tr>
           ...

CSS

table.dataTable {
    clear: both;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
    max-width: none !important;
}

table.customtable {
    font-size: 0.9rem;
}

.datatable-paid-0 {
    color: orange !important;
    margin-top: 13px !important;
    font-size: 19px !important;
    margin-left: 5px !important;
    margin-right: 5px !important;
}

.datatable-paid-1 {
    color: green !important;
    margin-top: 13px !important;
    font-size: 19px !important;
    margin-left: 5px !important;
    margin-right: 5px !important;
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

JavaScript

function status_icons() {
/*
    $('table tr').each(function() {
        if ($(this).find('td').eq(0).text() == '1') {
            $(this).find('td').eq(0).replaceWith('<i class="fa fa-3 fa-check-circle-o datatable-paid-1"></i>');
        } else {
            $(this).find('td').eq(0).replaceWith('<i class="fa fa-3 fa-exclamation-circle datatable-paid-0"></i>');
        }
    });
*/    
}

setTimeout(function() {
  $('#invoices-table').DataTable({
    responsive: true,
    columnDefs: [
    	{ orderable: false, targets: [-1, -2, -3] },
      { targets : 0, 
        render: function(data, type) {
          if (type == 'display') {
            return data == '1' 
              ? '<i class="fa fa-3 fa-check-circle-o datatable-paid-1"></i>'
              : '<i class="fa fa-3 fa-exclamation-circle datatable-paid-0"></i>'
          } else {
            return data
          }
        }
      }],
    
        // "lengthMenu": [
        //     [50, 5, 25, 100, -1],
        //     [50, 5, 25, 100, "All"]
        // ],
        dom: 'Bfrtip',  
    initComplete: function() {
      //status_icons() // it executes my function for the first page of results
      var api = this.api();
      // some irrelevant code that uses api and does not cause my issue
      // ...

    }
  });
}, 0);


$('body').on('mousedown','.paginate_button', function() {
  status_icons(); // it executes for the second page but not for the rest
});