Logo
Welcome Smartik
Profile Logout
Data Tables
Charts File Explorer

Data Tables

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which can add advanced interaction controls to any HTML table.

How to create a Data Table?

1. Initialize the plugin

jQuery(document).ready(function() {
    jQuery('#my_datatable1').dataTable();
});

2. Create a new table with class "display" and using as ID the same selector from plugin intialization.


<table id="my_datatable1" class="display">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>etc</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
            <td>etc</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
            <td>etc</td>
        </tr>
    </tbody>
</table>

2. For a better styling include it in a "box", without <div class="in"></div>


<section class="grid_12">
	<div class="box">
		<div class="title">Title</div>						
		<div class="inside">
			<table id="my_datatable1" class="display">
				<thead>
					<tr>
						<th>Column 1</th>
						<th>Column 2</th>
						<th>etc</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>Row 1 Data 1</td>
						<td>Row 1 Data 2</td>
						<td>etc</td>
					</tr>
					<tr>
						<td>Row 2 Data 1</td>
						<td>Row 2 Data 2</td>
						<td>etc</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</section>

The result of the code above ( NOTE: I've added more rows ):
My DataTable 1
Column 1 Column 2 Column 3 Column 4
Row 01 Data 1 Row 01 Data 2 Row 01 Data 3 Row 01 Data 4
Row 02 Data 1 Row 02 Data 2 Row 02 Data 3 Row 02 Data 4
Row 03 Data 1 Row 03 Data 2 Row 03 Data 3 Row 03 Data 4
Row 04 Data 1 Row 04 Data 2 Row 04 Data 3 Row 04 Data 4
Row 05 Data 1 Row 05 Data 2 Row 05 Data 3 Row 05 Data 4
Row 06 Data 1 Row 06 Data 2 Row 06 Data 3 Row 06 Data 4
Row 07 Data 1 Row 07 Data 2 Row 07 Data 3 Row 07 Data 4
Row 08 Data 1 Row 08 Data 2 Row 08 Data 3 Row 08 Data 4
Row 09 Data 1 Row 09 Data 2 Row 09 Data 3 Row 09 Data 4
Row 10 Data 1 Row 10 Data 2 Row 10 Data 3 Row 10 Data 4
Row 11 Data 1 Row 11 Data 2 Row 11 Data 3 Row 11 Data 4
Row 12 Data 1 Row 12 Data 2 Row 12 Data 3 Row 12 Data 4
Row 13 Data 1 Row 13 Data 2 Row 13 Data 3 Row 13 Data 4
Row 14 Data 1 Row 14 Data 2 Row 14 Data 3 Row 14 Data 4
Row 15 Data 1 Row 15 Data 2 Row 15 Data 3 Row 15 Data 4
Row 16 Data 1 Row 16 Data 2 Row 16 Data 3 Row 16 Data 4
Row 17 Data 1 Row 17 Data 2 Row 17 Data 3 Row 17 Data 4
Row 18 Data 1 Row 18 Data 2 Row 18 Data 3 Row 18 Data 4
Row 19 Data 1 Row 19 Data 2 Row 19 Data 3 Row 19 Data 4
Row 20 Data 1 Row 20 Data 2 Row 20 Data 3 Row 20 Data 4

Options

This plugin is very flexible, so to show all the options here is absurdly, since on the official site is a very large documentation... Please follow the links listed bellow

Reference:
Charts File Explorer