Dynamic Data Table using DataTable Jquery | 2my4edge

16 November 2013

Dynamic Data Table using DataTable Jquery

Dynamic Data table using dataTable Query is very simple and useful plugin technique, here we are going to see about that DataTable functions and features. this Dynamic data table has more feature within it, such as Search, Sorting, Pagination, field count, views per page. Those all features contains in the Data table, let see the details about that.[ NEW UPDATED ONE ]

dyanamic-data-table-using-Jquery

DOWNLOAD                LIVE DEMO

In the Dynamic dataTable we must have to use some Jquery plugins and bootstrap.min.css, because it is well supported with bootstrap files. [ UPDATED NEW ONE ]

SCRIPTS & CSS

<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" src="js/DT_bootstrap.js"></script>
<script src="js/dynamic-table.js"></script>
the above all file are important files.

dynamic-table.js

var Script = function () {

$('#sample_1').dataTable({
  "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
  "sPaginationType": "bootstrap",
  "oLanguage": {
      "sLengthMenu": "_MENU_ records per page",
      "oPaginate": {
          "sPrevious": "Prev",
          "sNext": "Next"
      }
  },
  "aoColumnDefs": [{
      'bSortable': false,
      'aTargets': [0]
  }]
});

jQuery('#sample_1_wrapper .dataTables_filter input')
.addClass("input-medium"); // modify table search input
jQuery('#sample_1_wrapper .dataTables_length select')
.addClass("input-mini"); // modify table per page dropdown

}();

TABLE CODE

table ID is very important. because we have to call the ID in the dynamic-table.js. 
<table class="table table-bordered" id="sample_1">
    <thead>
    <tr>
        <th>S No</th>
        <th>Title</th>
        <th>Points</th>
        <th>Demo</th>
        <th>Tutorial</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td><a href="http://www.2my4edge.com/2013/
        08/resize-font-using-query.html">Resize the
         font using Query</a></td>
        <td>1</td>
        <td class="center "><a href="http://www.2my4edge
        .com/2013/08/resize-font-using-query.html">Demo 
        </a></td>
        <td><a href="http://www.2my4edge.com/2013/08/
        resize-font-using-query.html"> Tutorial </a></td>
    </tr>
    
    <tr>
        <td>2</td>
        <td><a href="http://www.2my4edge.com/2013/07/
        export-mysql-database-table-as-csv.html">Export 
        the MySQL database table as CSV format</a></td>
        <td>10</td>
        <td class="center "><a href="http://www.2my4edge
        .com/2013/08/resize-font-using-query.html">Demo 
        </a></td>
        <td><a href="http://www.2my4edge.com/2013/08/
        resize-font-using-query.html"> Tutorial </a></td>
    </tr>
    
    <tr>
        <td>3</td>
        <td><a href="http://www.2my4edge.com/2013/07/
        simple-pagination-with-loading-effect.html">Simple 
        Pagination with loading effect</a></td>
        <td>9</td>
        <td class="center "><a href="http://demos.2my4edge
        .com/pagination/">Demo </a></td>
        <td><a href="http://www.2my4edge.com/2013/07/simple-
        pagination-with-loading-effect.html"> Tutorial </a></td>
    </tr>
    
    <tr>
        <td>4</td>
        <td><a href="http://www.2my4edge.com/2013/07/create-
        custom-file-chosen-input-type.html">custom file chosen
         input type</a></td>
        <td>7</td>
        <td class="center "><a href="http://demos.2my4edge.com/
        custom-file/">Demo </a></td>
        <td><a href="http://www.2my4edge.com/2013/07/create-
        custom-file-chosen-input-type.html"> Tutorial </a></td>
    </tr>
    
    
    </tbody>
</table>
that is it, the Data table will be works well, check the demo. i hope this is very helpful to you. For more details. refer www.datatables.net



RELATED POSTS:

Rotate image on hover using CSS3

Most popular posts in 2my4edge

Change text & background color while selecting text using CSS3

Marquee style in different manner with PHP and MySql

My Demos page design details with all my tutorials

Image Zoommer like E-commerce site using multizoom.js

Facebook style Scroll bar using Jquery

Change background image while page refresh using Javascript

Better and Flexible Tooltip using LiteTooltip.js

10 comments:

  1. Now thanks for saving my life with this amazing discovery, i have just one question. Please where do i change the drop down for the range of records at the top of the page. I would like to reduce the range starting point from 10 to 5.

    Wonderful Job you are doing Bro .........

    ReplyDelete
  2. Hi ,Its working fine for me.
    when i add delete button in this each row i am using confirm box before you delete the record it working for first page and other pages not working what is issue

    ReplyDelete
  3. Dear Arun..
    Thanks!! Its working fine with static table.

    But its not working when i add data to table dynamically..
    I am Trying to add tr dynamically from user inputs. While doing so, table is showing that no records in table. Newly added is getting data below that text.
    What can be done to fix this.
    Thanks in advance

    ReplyDelete
  4. Will this work with server side processing?

    ReplyDelete
  5. How to sort data from database order by DESC ! default is ASC !

    ReplyDelete
  6. can i use this to link from one table to another table to fetch the id and show the details

    ReplyDelete
  7. how to show default no of 50 row per page

    ReplyDelete
  8. how to show record default 50 row per page

    ReplyDelete
    Replies
    1. Hi,

      $('#example').datatable({
      'pageLength': 50
      });

      This is to load only 50 rows per page. try this.

      Delete

^