18
Dec
First of all, you have to download jQuery datatable plugin files from following url:http://www.datatables.net.
After that, copy the jquery.dataTables.js and jquery.js files from /media/js/ to your drupal module folder.
Then copy the demo_page.css and demo_table.css files from /media/css to your drupal module folder.
Then open your .module file and include following line in it:
drupal_add_js(drupal_get_path(‘module’, ‘<your module folder name>’) ‘/jquery.js’);
drupal_add_js(drupal_get_path(‘module’, ‘<your module folder name>’) ‘/jquery.dataTables.js’);
drupal_add_css(drupal_get_path(‘module’, ‘<your module folder name>’) .’/demo_page.css’);
drupal_add_css(drupal_get_path(‘module’, ‘<your module folder name>’) .’/demo_table.css’);
After that, you have to create a div and put your table inside the div. Don’t forget to give an id to the div and the table.
Your table must have <thead></thead> tags to include the heading row and <tbody></tbody> to include the data rows. The structure should be like this:
<pre class=”brush:php”><div id=”demo”>
<table cellpadding=”0″ cellspacing=”0″ border=”0″ class=”display” id=”example”>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr class=”gradeX”>
<td>Jack</td>
<td>32</td>
</tr>
<tr class=”gradeC”>
<td>Tom</td>
<td>25</td>
</tr>
</tbody>
</table>
</div>
Also include the following jQuery line to change your table to a data
drupal_add_js(‘$document.ready(function(){
$(“#example”).dataTable();
});’,'inline’);</pre>
thanks, very usefull, but be carefull with apostrophe and
inverted commas/quotation marks you use, drupal does not recognized them
‘ ’ –> NO
“ ” –> NO
” ” –> YES
i mean that wordpress change that characters in this article.