All,
I am trying to get JQueryUI tooltip and Tablesorter plugin to work together. I am unable to display the JQueryUI tooltip when I hover on the names but the tooltip won't appear after I click the "Reset Sort Order" link.
How can I make sure the tooltip is displayed after I click the "Reset Sort Order" link. The tooltip should also be displayed when the table is sorted or paged.
A demo of the code can be seen at: http://jsbin.com/asaxi3/32/
The code is here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>jQuery plugin: Tablesorter 2.0 - Pager plugin</title>
<link rel="stylesheet" href="css/jq.css" type="text/css" media="print, projection, screen" />
<link rel="stylesheet" href="http://tablesorter.com/themes/blue/style.css" type="text/css" media="print, projection, screen" />
<link rel="stylesheet" type="text/css" href="http://jquery.bassistance.de/tooltip/jquery.tooltip.css">
<script type="text/javascript" src="http://tablesorter.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://tablesorter.com/jquery.tablesorter.js"></script>
<script type="text/javascript" src="http://tablesorter.com/addons/pager/jquery.tablesorter.pager.js"></script>
<script type="text/javascript" src="http://jquery.bassistance.de/tooltip/jquery.tooltip.js"></script>
</head>
<body>
<div id="main">
<table id="table1" cellspacing="1" class="tablesorter">
<thead>
<tr>
<th>Name</th>
<th>Major</th>
<th>Sex</th>
</tr>
</thead>
<tbody>
<tr>
<td>Student01</td>
<td>Languages</td>
<td>male</td>
</tr>
<tr>
<td>Student02</td>
<td>Mathematics</td>
<td>male</td>
</tr>
<tr>
<td>Student03</td>
<td>Languages</td>
<td>female</td>
</tr>
<tr>
<td>Student04</td>
<td>Languages</td>
<td>male</td>
</tr>
<tr>
<td>Student05</td>
<td>Languages</td>
<td>female</td>
</tr>
<tr>
<td>Student06</td>
<td>Mathematics</td>
<td>male</td>
</tr>
<tr>
<td>Student07</td>
<td>Mathematics</td>
<td>male</td>
</tr>
<tr>
<td>Student08</td>
<td>Languages</td>
<td>male</td>
</tr>
<tr>
<td>Student09</td>
<td>Mathematics</td>
<td>male</td>
</tr>
<tr>
<td>Student10</td>
<td>Languages</td>
<td>male</td>
</tr>
<tr>
<td>Student11</td>
<td>Languages</td>
<td>male</td>
</tr>
<tr>
<td>Student12</td>
<td>Mathematics</td>
<td>female</td>
</tr>
<tr>
<td>Student13</td>
<td>Languages</td>
<td>female</td>
</tr>
<tr>
<td>Student14</td>
<td>Languages</td>
<td>female</td>
</tr>
<tr>
<td>Student15</td>
<td>Languages</td>
<td>male</td>
</tr>
<tr>
<td>Student16</td>
<td>Languages</td>
<td>female</td>
</tr>
<tr>
<td>Student17</td>
<td>Languages</td>
<td>female</td>
</tr>
<tr>
<td>Student18</td>
<td>Mathematics</td>
<td>male</td>
</tr>
<tr>
<td>Student19</td>
<td>Languages</td>
<td>male</td>
</tr>
<tr>
<td>Student20</td>
<td>Mathematics</td>
<td>male</td>
</tr>
<tr>
<td>Student21</td>
<td>Languages</td>
<td>male</td>
</tr>
<tr>
<td>Student22</td>
<td>Mathematics</td>
<td>male</td>
</tr>
<tr>
<td>Student23</td>
<td>Languages</td>
<td>female</td>
</tr>
</tbody>
</table>
<div id="pager1" class="pager">
<form>
Reset Sort Order
<img src="http://tablesorter.com/addons/pager/icons/first.png" class="first"/>
<img src="http://tablesorter.com/addons/pager/icons/prev.png" class="prev"/>
<input type="text" class="pagedisplay"/>
<img src="http://tablesorter.com/addons/pager/icons/next.png" class="next"/>
<img src="http://tablesorter.com/addons/pager/icons/last.png" class="last"/>
<select class="pagesize">
<option selected="selected" value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
</form>
</div>
<script type="text/javascript">
$(function() {
$("#table1 a").tooltip({
showURL: false,
fixPNG: true,
track:true,
delay:0
});
tablebackup = $("#table1").clone();
$("#table1")
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager1")});
});
function resetTableOrder(tablebackup) {
tablebackup.clone().insertAfter("#table1");
$("#table1").remove();
$("#table1")
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager1")});
//Load Tool Tips for links inside the tab container
$("#table1 a").tooltip({
showURL: false,
fixPNG: true,
track:true,
delay:0
});
}
</script>
</div>
</body>
</html>
Thanks
When you initialize tooltip the first time, it removed the title attribute from the tag. Then when the table is refreshed, it cannot find the title tag for each link and therefore skips it. I would recommend caching the title tags so when you reinitialize the tooltip, you can reinsert the original title tags.
var tableTitles;
$(function() {
tableTitles = $("#table1 a").attr("title");
$("#table1 a").tooltip({
showURL: false,
fixPNG: true,
track:true,
delay:0
});
tablebackup = $("#table1").clone();
$("#table1")
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager1")});
});
function resetTableOrder(tablebackup) {
tablebackup.clone().insertAfter("#table1");
$("#table1").remove();
$("#table1")
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager1")});
//Load Tool Tips for links inside the tab container
$("#table1 a").attr("title", tableTitles).tooltip({
showURL: false,
fixPNG: true,
track:true,
delay:0
});
}
Here is the working version: http://jsbin.com/asaxi3/36
Vincent, it's looking good. Seems like you're on the right track.
I was on a similar project and found that the entire thing seemed much easier and more feature rich when I switched over go Qtip and Datatables. The switch from the exact solution you're using to the new scripts gave my app night and day difference in functionality and useability...and the changeover was quick.
Here's links to the other tools:
Qtip: http://craigsworks.com/projects/qtip/
Datatables: http://datatables.net/
The sorting and searching features alone on Datatables make it a must see.
Good luck!
Related
Most dates in my table are formatted in mm/dd/yyyy. However, I have two dates that are in mm/dd/yyyy to mm/dd/yyyy format. What is the best way to sort it? The column should only sort on the first date (from date).
Thanks in advance.
Please see my test case here -
https://live.datatables.net/zasupaza/1/edit
$(document).ready(function() {
$.fn.dataTable.moment( 'MM/DD/YYYY');
$('#example_full1').DataTable({
responsive: true,
fixedHeader: true,
order:[[ 0, 'desc' ]]
} );
} );
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<meta charset=utf-8 />
</head>
<body>
<table id="example_full1" class="row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%;"><thead>
<tr>
<th>1</th>
<th >2</th>
<th >3</th>
<th>4</th>
</tr>
</thead><tbody>
<tr>
<td>12/16/2007</td>
<td>test1</td>
<td>5</td>
<td>16</td>
</tr>
<tr>
<td>09/08/2014 - 09/12/2014</td>
<td>test5</td>
<td>test5</td>
<td>test5</td>
</tr>
<tr>
<td>08/16/2020</td>
<td>test5</td>
<td>test5</td>
<td>test5</td>
</tr>
<tr>
<td>08/16/2021 - 08/19/2021</td>
<td>test5</td>
<td>test5</td>
<td>test5</td>
</tr>
<tr>
<td>11/14/2012</td>
<td>test5</td>
<td>test5</td>
<td>test5</td>
</tr>
</tbody></table>
You can use Pre-deformatting method to convert the date range data into orderable data as the following:
$(document).ready(function() {
$.fn.dataTable.ext.type.order['date-range-pre'] = function(date){
var parts = date.split(" - ");
return new Date(parts[0]);
};
$('#example_full1').DataTable({
responsive: true,
fixedHeader: true,
order:[[ 0, 'desc' ]],
columnDefs: [
{
targets: 0,
type: 'date-range'
}
]
} );
} );
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<meta charset=utf-8 />
</head>
<body>
<table id="example_full1" class="row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%;"><thead>
<tr>
<th>1</th>
<th >2</th>
<th >3</th>
<th>4</th>
</tr>
</thead><tbody>
<tr>
<td>12/16/2007</td>
<td>test1</td>
<td>5</td>
<td>16</td>
</tr>
<tr>
<td>09/08/2014 - 09/12/2014</td>
<td>test5</td>
<td>test5</td>
<td>test5</td>
</tr>
<tr>
<td>08/16/2020</td>
<td>test5</td>
<td>test5</td>
<td>test5</td>
</tr>
<tr>
<td>08/16/2021 - 08/19/2021</td>
<td>test5</td>
<td>test5</td>
<td>test5</td>
</tr>
<tr>
<td>11/14/2012</td>
<td>test5</td>
<td>test5</td>
<td>test5</td>
</tr>
</tbody></table>
by defining date-range-pre which format you date range by splitting it then convert first date into date type which is sortable type in addition to ignoring second date
change type of this column to date-range inside columnDefs
Put an hidden div before your cell content (just one if it's a from-to cell) YYYY-MM-DD format and remove the datable.moment function.
https://live.datatables.net/zasupaza/3/edit
Funny, I had the same problem today. For me, it worked to put a data-sort attribute with the timestamp on the td:
<td data-sort="{{ collection.getDateCreated().getTimestamp() }}">
{{ collection.getCreatedAtString() }}
</td>
This will make DataTable to use the value in data-sort rather than the value in the tags. Apparently, DataTables calls this orthogonal data.
You can combine DataTables' support for orthogonal data with some JavaScript to reformat your date string.
In this case, because you have mm/dd/yyyy as your format, we will re-arrange the string to be yyyy/mm/dd - and then we can rely on the natural sort order of the resulting string.
For your longer date strings mm/dd/yyyy to mm/dd/yyyy, we can ignore the second date.
The key point here is: This re-formatting only applies to the data used for sorting. It does not change the data which is displayed to the user, or which is used for searching/filtering.
$(document).ready(function() {
var table = $('#example_full1').DataTable({
columnDefs: [{
targets: 0,
render: function(data, type, row, meta) {
if (type === 'sort') { // ONLY for data used for sorting
//console.log(data.substring(6, 10) + '/' + data.substring(0, 5));
return data.substring(6, 10) + '/' + data.substring(0, 5);
} else {
return data; // for display and filtering values
}
}
}]
});
});
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>
<body>
<div style="margin: 20px;">
<table id="example_full1" class="row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%;">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</thead>
<tbody>
<tr>
<td>12/16/2007</td>
<td>test1</td>
<td>5</td>
<td>16</td>
</tr>
<tr>
<td>09/08/2014 - 09/12/2014</td>
<td>test5</td>
<td>test5</td>
<td>test5</td>
</tr>
<tr>
<td>08/16/2020</td>
<td>test5</td>
<td>test5</td>
<td>test5</td>
</tr>
<tr>
<td>08/16/2021 - 08/19/2021</td>
<td>test5</td>
<td>test5</td>
<td>test5</td>
</tr>
<tr>
<td>11/14/2012</td>
<td>test5</td>
<td>test5</td>
<td>test5</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I have been trying a lot since yesterday and looking at the following solutions but not working!
http://www.srccodes.com/p/article/27/make-html-table-sortable-jquery-tablesorter-plugin
http://tablesorter.com/docs/
Link the Following files:-
<!-- choose a theme file -->
<link rel="stylesheet" href="/path/to/theme.default.css">
<!-- load jQuery and tablesorter scripts -->
<script type="text/javascript" src="/path/to/jquery-latest.js"></script>
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script>
<!-- tablesorter widgets (optional) -->
<script type="text/javascript" src="/path/to/jquery.tablesorter.widgets.js"></script>
Use THEAD and TBODY in your HTML:-
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>jsmith#gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>fbach#yahoo.com</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>jdoe#hotmail.com</td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Conway</td>
<td>Tim</td>
<td>tconway#earthlink.net</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>
use javascript function as follow:-
$(function() {
$("#myTable").tablesorter();
});
Its dependency says
Dependencies
jquery >=1.2.6
check https://plugins.jquery.com/tablesorter/
So, it should work with jquery version 1.8.3
Ad their github says
Works with jQuery 1.2.6+ (jQuery 1.4.1+ needed with some widgets).
Works with jQuery 1.9+ ($.browser.msie was removed; needed in the original version).
check https://github.com/Mottie/tablesorter.
I have the following bootstrap table, I want to add a textarea for a row.
But that text area should expand to all the columns. I have included a image example.
For row 2 I want to have the 4 columns and the textarea. text area should cover all the column as show in the image below.
Is it possible to do?
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table id="table" class="table table-bordered">
<thead>
<tr>
<th data-field="state" data-radio="true"></th>
<th data-field="name">Name</th>
<th data-field="starts">Stars</th>
<th data-field="forks">Forks</th>
<th data-field="description">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="radio" name="radioGroup"></td>
<td>
bootstrap-table
</td>
<td>526</td>
<td>122</td>
<td>An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3)
</td>
</tr>
<tr>
<td><input type="radio" name="radioGroup" checked></td>
<td>
multiple-select
</td>
<td>288</td>
<td>150</td>
<td>A jQuery plugin to select multiple elements with checkboxes :)
</td>
</tr>
<tr>
<td><input type="radio" name="radioGroup"></td>
<td>
bootstrap-show-password
</td>
<td>32</td>
<td>11</td>
<td>Show/hide password plugin for twitter bootstrap.
</td>
</tr>
</tbody>
</table>
You can achieve it in the following way--
Add colspan=12 to your <td> which contains the textarea and give the text area width:100%
Working snippet
textarea {
width:100%;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table id="table" class="table table-bordered">
<thead>
<tr>
<th data-field="state" data-radio="true"></th>
<th data-field="name">Name</th>
<th data-field="starts">Stars</th>
<th data-field="forks">Forks</th>
<th data-field="description">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="radio" name="radioGroup"></td>
<td>
bootstrap-table
</td>
<td>526</td>
<td>122</td>
<td>An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3)
</td>
</tr>
<tr>
<td><input type="radio" name="radioGroup" checked></td>
<td>
multiple-select
</td>
<td>288</td>
<td>150</td>
<td>A jQuery plugin to select multiple elements with checkboxes :)
</td>
</tr>
<tr>
<td><input type="radio" name="radioGroup"></td>
<td>
bootstrap-show-password
</td>
<td>32</td>
<td>11</td>
<td>Show/hide password plugin for twitter bootstrap.
</td>
</tr>
<tr>
<td colspan="12">
<textarea></textarea>
</td>
</tr>
</tbody>
</table>
So below I have 2 test, first one has a auto width while the second one has a fixed width (specified width given through a window load event) and both has a style of 'overflow auto'. Is there a way I could automatically make the table get inside its container div and not exceed its parent div width like it reject the behaviour of a child over its parent container?. I prefer not to specified the width of the parent just to simply fix the problem (it must be auto width to cater its responsiveness). Any help, clues, suggestions, ideas, recommendations are greatly appreciated, thank you.
$(window).load(function(){
//set the width of the #test2
$("#test2").css({ 'width' : $("#test2_wrapper").width() + 'px', 'margin' : '0px auto' });
alert("#test2 div, has a width of "+$("#test2_wrapper").width()+"px");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div style="overflow:auto;width:100%;border:1px solid blue;">
<h3>Without specifying width on the container</h3>
<div style="overflow:auto;">
<table class="table table-hover">
<thead>
<tr>
<td>Username</td>
<td>Real Password</td>
<td>Firstname</td>
<td>Middlename</td>
<td>Lastname</td>
<td>Address</td>
<td>Age</td>
<td>Gender</td>
<td>Martial Status</td>
<td>Civil Staus</td>
<td>Mother's Maiden Name</td>
<td>Father's name</td>
<td>Contact number incase of emergency</td>
<td>Status</td>
<td>STTR</td>
<td>BIR</td>
<td>SSS</td>
<td>Identity number</td>
<td>Student ID number</td>
<td>Employee number</td>
<td>Have you ever tried taco</td>
<td>Will this is a test to see the tables full length</td>
<td>Will, the world aint no sunshine and rainbows</td>
<td>If you dont work hard, you'll end up in a lossers corner</td>
<td>This is the end of the test</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div id="test2_wrapper" style="width:600px;border:1px solid red;">
<h3>With specifying width on the container</h3>
<div style="overflow:auto;border:1px solid pink;" id="test2">
<table class="table table-hover">
<thead>
<tr>
<td>Username</td>
<td>Real Password</td>
<td>Firstname</td>
<td>Middlename</td>
<td>Lastname</td>
<td>Address</td>
<td>Age</td>
<td>Gender</td>
<td>Martial Status</td>
<td>Civil Staus</td>
<td>Mother's Maiden Name</td>
<td>Father's name</td>
<td>Contact number incase of emergency</td>
<td>Status</td>
<td>STTR</td>
<td>BIR</td>
<td>SSS</td>
<td>Identity number</td>
<td>Student ID number</td>
<td>Employee number</td>
<td>Have you ever tried taco</td>
<td>Will this is a test to see the tables full length</td>
<td>Will, the world aint no sunshine and rainbows</td>
<td>If you dont work hard, you'll end up in a lossers corner</td>
<td>This is the end of the test</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
I want to do client side pagination and used the Jquery suggestion as suggested here.
There are few issues in using that script.One the paging icons always come at the bottom no matter what we set the position on the pager div.Plus my table has some data size inconsistenzies and hence may have a varying size page to page.Because of this the table size varies drastically but the pager remains fixed casuing overlap.I tried div to serperate but of no use.Here is my pager code
<div id="pager" class="pager">
<form>
<img src="../addons/pager/icons/first.png" class="first"/>
<img src="../addons/pager/icons/prev.png" class="prev"/>
<input type="text" class="pagedisplay"/>
<img src="../addons/pager/icons/next.png" class="next"/>
<img src="../addons/pager/icons/last.png" class="last"/>
<select class="pagesize">
<option selected="selected" value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
</form>
</div>
This is my Jquery script
<script type="text/javascript">
$(function() {
$(theTable)
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager")});
});
</script>
My table id is theTable.
I want to place the pager code to come at the top so that the size of my table does not affect the pagination icons.
The are lots of examples available on DataTables you can download the examples along with the css and the javascripts required for it...
Also it is very easy to initialize here is a code sample :
Add the css and js(available in the downloaded zip file) required at the top
<style type="text/css" title="currentStyle">
#import "../../media/css/demo_page.css";
#import "../../media/css/demo_table.css";
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
The table with the id 'theTable'
<table cellpadding="0" cellspacing="0" border="0" class="display" id="theTable">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet
Explorer 4.0</td>
<td>Win 95+</td>
<td class="center"> 4</td>
<td class="center">X</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.5</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 2.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 3.0</td>
<td>Win 2k+ / OSX.3+</td>
<td class="center">1.9</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Misc</td>
<td>NetFront 3.1</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
</tbody>
Now Intialize datatables by the following:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#theTable').dataTable();
} );
</script>
That will inialize datatable wit zero configs....
To set position of the pagination use the sDom feature
"sDom": '<"fg-toolbar ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"fg-toolbar ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>'
Notice the letters lfr, t,ip they stand for :
'l' - Length changing
'f' - Filtering input
't' - The table!
'i' - Information
'p' - Pagination
'r' - pRocessing
Just swap the places of these letters and get them where you want r/l by p
I would recommend using Datatables . Just follow the documentation. Let me know in case you face any problems. You just need to call the construction function to get started
$(document).ready(function() {
$('#tableid').dataTable();
} );
You can download the source files from here