Sunday, 15 November 2015

How to create pagination, sorting and searching using dataTables

Add 2 files in you header file.

<link href="<?php echo base_url('admin/css/jquery.dataTables.css');?>" rel="stylesheet" type="text/css">
<script src="<?php echo base_url('admin/js/jquery.dataTables.js'); ?>"></script>

Write below line in bottom of file.

 <!-- Table -->
        <table class="table" id="users_form">
          <thead>
            <tr>
              <th>#</th>
              <th>Event Title</th>
              <th>Event Start Date</th>
              <th>Event End Date</th>             
              <th id="action">Action</th>
            </tr>
          </thead>
          <?php 
         
          for ($i=0;$i<count($show);$i++) { ?>
          <tr>
            <td><?php echo $i+1; ?></td>
            <td><?php echo $show[$i]['event_title']; ?></td>
            <td><?php echo $show[$i]['event_startDay']; ?></td>
            <td><?php echo $show[$i]['event_endDay']; ?></td>           
            <td>
            <a href="<?php echo base_url(); ?>admin/event/edit_cms/<?php echo $show[$i]['event_id']; ?>">Veiw</a> |
             <a href="<?php echo base_url(); ?>admin/event/edit_cms/<?php echo $show[$i]['event_id']; ?>">Edit</a> | <a href="<?php echo base_url(); ?>admin/event/delete_users/<?php echo $show[$i]['event_id']; ?>">Delete</a></td>
          </tr>
          <?php } ?>
        </table>

<script>$(document).ready(function() {
  $('#users_form').dataTable();
});
</script>

Special note: How to remove sorting on any field. Add below lines.

<style> #action { background-image: none; pointer-events:none; } </style>

No comments:

Post a Comment