Data Tables and DataTables Plugin in jQuery 1.3 with PHP

Exclusive offer: get 50% off this eBook here
jQuery 1.3 with PHP

jQuery 1.3 with PHP — Save 50%

Enhance your PHP applications by increasing their responsiveness through jQuery and its plugins.

$23.99    $12.00
by Kae Verens | October 2009 | MySQL Content Management Open Source PHP Web Development

In this article by Kae Verens, we will look at:

 

  • How to install and use the DataTables plugin
  • How to load data pages on request from the server
  • Searching and ordering the data

From time to time, you will want to show data in your website and allow the data to be sorted and searched.

It always impresses me that whenever I need to do anything with jQuery, there are usually plugins available, which are exactly or close to what I need.

The DataTables plugin allows sorting, filtering, and pagination on your data.

Here's an example screen from the project we will build in this article. The data is from a database of cities of the world, filtered to find out if there is any place called nowhere in the world:

Data Tables and DataTables Plugin in jQuery 1.3 with PHP

Get your copy of DataTables from http://www.datatables.net/, and extract it into the directory datatables, which is in the same directory as the jquery.min.js file.

What the DataTables plugin does is take a large table, paginate it, and allow the columns to be ordered, and the cells to be filtered.

Setting up DataTables

Setting up DataTables involves setting up a table so that it has distinct < thead > and < tbody > sections, and then simply running dataTable() on it.

As a reminder, tables in HTML have a header and a body. The HTML elements < thead > and < tbody > are optional according to the specifications, but the DataTables plugin requires that you put them in, so that it knows what to work with.

These elements may not be familiar to you, as they are usually not necessary when you are writing your web pages and most people leave them out, but DataTables needs to know what area of the table to turn into a navigation bar, and which area will contain the data, so you need to include them.

Client-side code

The first example in this article is purely a client-side one. We will provide the data in the same page that is demonstrating the table.

Copy the following code into a file in a new demo directory and name it tables.html:

<html> 
<head>
<script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="../jquery.min.js"></script>
<script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="../datatables/media/js/jquery.dataTables.js">
</script>
<style type="text/css">
@import "../datatables/media/css/demo_table.css";</style>
<script>
$(document).ready(function(){
$('#the_table').dataTable();
});
</script>
</head>
<body>
<div style="width:500px">
<table id="the_table">
<thead>
<tr>
<th>Artist / Band</th><th>Album</th><th>Song</th>
</tr>
</thead>
<tbody>
<tr><td>Muse</td>
<td>Absolution</td>
<td>Sing for Absolution</td>
</tr>
<tr><td>Primus</td>
<td>Sailing The Seas Of Cheese</td>
<td>Tommy the Cat</td>
</tr>
<tr><td>Nine Inch Nails</td>
<td>Pretty Hate Machine</td>
<td>Something I Can Never Have</td>
</tr>
<tr><td>Horslips</td>
<td>The Táin</td>
<td>Dearg Doom</td>
</tr>
<tr><td>Muse</td>
<td>Absolution</td>
<td>Hysteria</td>
</tr>
<tr><td>Alice In Chains</td>
<td>Dirt</td>
<td>Rain When I Die</td>
</tr>
<!-- PLACE MORE SONGS HERE -->
</tbody>
</table>
</div>
</body>
</html>

When this is viewed in the browser, we immediately have a working data table:

Data Tables and DataTables Plugin in jQuery 1.3 with PHP

Note that the rows are in alphabetical order according to Artist/Band. DataTables automatically sorts your data initially based on the first column.

The HTML provided has a < div > wrapper around the table, set to a fixed width. The reason for this is that the Search box at the top and the pagination buttons at the bottom are floated to the right, outside the HTML table. The < div > wrapper is provided to try to keep them at the same width as the table.

There are 14 entries in the HTML, but only 10 of them are shown here. Clicking the arrow on the right side at the bottom-right pagination area loads up the next page:

Data Tables and DataTables Plugin in jQuery 1.3 with PHP

And finally, we also have the ability to sort by column and search all data:

Data Tables and DataTables Plugin in jQuery 1.3 with PHP

In this screenshot, we have the data filtered by the word horslips, and have ordered Song in descending order by clicking the header twice.

With just this example, you can probably manage quite a few of your lower-bandwidth information tables. By this, I mean that you could run the DataTables plugin on complete tables of a few hundred rows. Beyond that, the bandwidth and memory usage would start affecting your reader's experience. In that case, it's time to go on to the next section and learn how to serve the data on demand using jQuery and Ajax.

As an example of usage, a user list might reasonably be printed entirely to the page and then converted using the DataTable plugin because, for smaller sites, the user list might only be a few tens of rows and thus, serving it over Ajax may be overkill. It is more likely, though, that the kind of information that you would really want this applied to is part of a much larger data set, which is where the rest of the article comes in!

Getting data from the server

The rest of the article will build up a sample application, which is a search application for cities of the world.

This example will need a database, and a large data set. I chose a list of city names and their spelling variants as my data set. You can get a list of this type online by searching.

The exact point at which you decide a data set is large enough to require it to be converted to serve over Ajax, instead of being printed fully to the HTML source, depends on a few factors, which are mostly subjective. A quick test is: if you only ever need to read a few pages of the data, yet there are many pages in the source and the HTML is slow to load, then it's time to convert.

The database I'm using in the example is MySQL (http://www.mysql.com/).

It is trivial to convert the example to use any other database, such as PostgreSQL or SQLite.

For your use, here is a short list of large data sets:

The reason I chose a city name list is that I wanted to provide a realistic large example of when you would use this.

In your own applications, you might also use the DataTables plugin to manage large lists of products, objects such as pages or images, and anything else that can be listed in tabular form and might be very large.

The city list I found has over two million variants in it, so it is an extreme example of how to set up a searchable table.

It's also a perfect example of why the Ajax capabilities of the DataTables project are important. Just to see the result, I exported all the entries into an HTML table, and the file size was 179 MB. Obviously, too large for a web page.

So, let's find out how to break the information into chunks and load it only as needed.

Client-side code

On the client side, we do not need to provide placeholder data. Simply print out the table, leaving the < tbody > section blank, and let DataTables retrieve the data from the server.

We're starting a new project here, so create a new directory in your demos section and save the following into it as tables.html:

<html> 
<head>
<script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="../jquery.min.js"></script>
<script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="../datatables/media/js/jquery.dataTables.js">
</script>
<style type="text/css">
@import "../datatables/media/css/demo_table.css";
table{width:100%}
</style>
<script>
$(document).ready(function(){
$('#the_table').dataTable({
'sAjaxSource':'get_data.php'
});
});
</script>
</head>
<body>
<div style="width:500px">
<table id="the_table">
<thead>
<tr>
<th>Country</th>
<th>City</th>
<th>Latitude</th>
<th>Longitude</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
</html>

In this example, we've added a parameter to the .dataTable call, sAjaxSource, which is the URL of the script that will provide the data (the file will be named get_data.php).

Server-side code

On the server side, we will start off by providing the first ten rows from the database.

DataTables expects the data to be returned as a two-dimensional array named aaData.

In my own database, I've created a table like this:

CREATE TABLE `cities` ( 
`ccode` char(2) DEFAULT NULL,
`city` varchar(87) DEFAULT NULL,
`longitude` float DEFAULT NULL,
`latitude` float DEFAULT NULL,
KEY `city` (`city`(5))
) ENGINE=MyISAM DEFAULT CHARSET=utf8

Most of the searching will be done on city names, so I've indexed city.

Initially, let's just extract the first page of information. Create a file called get_data.php and save it in the same directory as tables.html:

<?php 
// { initialise variables
$amt=10;
$start=0;
// }
// { connect to database
function dbRow($sql){
$q=mysql_query($sql);
$r=mysql_fetch_array($q);
return $r;
}
function dbAll($sql){
$q=mysql_query($sql);
while($r=mysql_fetch_array($q))$rs[]=$r;
return $rs;
}
mysql_connect('localhost','username','password');
mysql_select_db('phpandjquery');
// }
// { count existing records
$r=dbRow('select count(ccode) as c from cities');
$total_records=$r['c'];
// }
// { start displaying records
echo '{"iTotalRecords":'.$total_records.',
"iTotalDisplayRecords":'.$total_records.',
"aaData":[';
$rs=dbAll("select ccode,city,longitude,latitude from cities
order by ccode,city limit $start,$amt");
$f=0;
foreach($rs as $r){
if($f++) echo ',';
echo '["',$r['ccode'],'",
"',addslashes($r['city']),'",
"',$r['longitude'],'",
"',$r['latitude'],'"]';
}
echo ']}';
// }

In a nutshell, what happens is that the script counts how many cities are there in total, and then returns that count along with the first ten entries to the client browser using JSON as the transport.

jQuery 1.3 with PHP Enhance your PHP applications by increasing their responsiveness through jQuery and its plugins.
Published: October 2009
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

A sample JSON result for this (formatted for easier reading) is this:


{
"iTotalRecords":2673762,
"iTotalDisplayRecords":2673762,
"aaData":[
["ad","aixas","42.4833","1.46667"],
["ad","aixirivali","42.4667","1.5"],
["ad","aixirivall","42.4667","1.5"]
/* and 7 more... */
]
}

The three parameters in this JSON array are:

  • iTotalRecords is the total number of records in the database
  • iTotalDisplayRecords is the total number after filtering (explained later)
  • aaData is a two-dimensional array of data that corresponds to the rows and columns of the shown table

For the moment, iTotalRecords is equal to iTotalDisplayRecords. Later in the article, we'll see how this would change.

Data Tables and DataTables Plugin in jQuery 1.3 with PHP

If you have done like I did, and have installed a very large database, you'll see the first ten entries of the table appear in the browser several seconds after the page opens.

This is because it is much slower to build a list of items from a database than it is to just read the list directly from a file.

We'll address that now, and will come back to pagination, ordering, and searches afterwards.

jQuery 1.3 with PHP Enhance your PHP applications by increasing their responsiveness through jQuery and its plugins.
Published: October 2009
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

Caching your database queries

In any large database, it is important to cache your queries. Database calls can be quite expensive, even after careful tuning.

In the database that I set up for this, there are over two million rows, and queries can take seconds to complete (tens of seconds if no indexing is done).

While modern databases do include caching engines for popular queries, it is much better to simply open and read a file that contains cached information that translates to "There are 2673762 rows in this database" than to have the database actually count the rows.

We will create a very simple caching mechanism that takes the requested query, encodes the query to a string using MD5, then returns the cached query if it exists, and creates the cache if not. Remember, MD5 returns a pseudo-random string of characters that can be used to save a cache with a unique name.

A nice thing about cities and countries is that the data does not change very quickly. So, it would not be necessary to clear the cache all that often—after a few hundred queries through it, it should be quite fast, as the most common searches will be cached quickly, and non-cached searches will increasingly only be for rarer requests.

Server-side code

So, let's add the caching functions. Add this to the top of get_data.php:

// { caching functions 
function cache_load($md5){
if(file_exists('cache/'.$md5)){
return json_decode(file_get_contents('cache/'.$md5), true);
}
return false;
}
function cache_save($md5,$vals){
file_put_contents('cache/'.$md5, json_encode($vals));
}
// }

These functions read and write from a directory named cache contained in the same directory as the file itself. Create the directory and make sure it is writable by the server.

The reason I use json_encode instead of serialize is that if I ever want to pass the data directly back to jQuery without re-encoding it, then JSON is perfect. With serialize, I would need to decode it in PHP, then re-encode as JSON before sending it on.

Now, we need to change the database querying functions so that they read from the cache if possible. Change the two functions to:

function dbRow($sql){ 
$r=cache_load(md5($sql));
if($r===false){
$q=mysql_query($sql);
$r=mysql_fetch_array($q);
cache_save(md5($sql),$r);
}
return $r;
}
function dbAll($sql){
$rs=cache_load(md5($sql));
if($rs===false){
$rs=array();
$q=mysql_query($sql);
while($r=mysql_fetch_array($q)) $rs[]=$r;
cache_save(md5($sql),$rs);
}
return $rs;
}

Note that this caches all queries—if you are using this in a project where the data is more volatile, then you will want to change the caching method to only cache data you are sure is likely to be static, and to allow for easy clearing of the cache in case of data changing.

Before we carry on, you should verify for yourself that there is a marked improvement in the speed. Load up the page a few times first using the non-cached version, and time it, and then load up the cached version a few times. On very large data sets, the speed difference should be very obvious.

If you overwrote your cache, you can emulate this, by manually removing the server's cache after each page load.

Pagination through Ajax

OK, we've got some data from the server, and we've made the query run quickly, so now let's get onto pagination.

To get pagination working, we need to perform the data sorting on the server instead of the browser. It is not possible for the sorting to be done on the client side because in order to do that, the DataTables plugin must have all of the sortable data in memory.

Client-side code

In table.html, change the dataTable call to this:

 $('#the_table').dataTable({ 
'bProcessing':true,
'bServerSide':true,
'sAjaxSource':'get_data.php'
});

The bServerSide parameter tells DataTables to do all the processing on the server—that is, don't do any sorting or searching locally, as the browser does not have the information it needs to do this.

The bProcessing parameter adds a small text message, processing, to the screen when it's retrieving the information from the server. You can use CSS to make this message more obvious if you want.

Server-side code

If you load up table.html in your browser now and look at the query that's sent (using a debugging tool such as Firebug or TamperData), you will see something like this:

http://your.site/9-2-loading-dynamically/get_data.php?sEcho=1&iColumns=
4&sColumns=&iDisplayStart=0&iDisplayLength=10&sSearch=&bEscapeRegex=
true&sSearch_0=&bEscapeRegex_0=true&sSearch_1=&bEscapeRegex_1=
true&sSearch_2=&bEscapeRegex_2=true&sSearch_3=&bEscapeRegex_3=
true&iSortingCols=1&iSortCol_0=0&iSortDir_0=asc

Quite a lot in there!

Broken apart, this URL has the following parameters:

  • sEcho: Internal variable.
  • iColumns: Number of columns being displayed.
  • sColumns: List of column names.
  • iDisplayStart: Where to paginate from.
  • iDisplayLength: Number of rows that are visible.
  • sSearch: String to search globally for.
  • bEscapeRegex: Whether search is a regular expression.
  • sSearch_(int) : Column-specific search (one each for each column).
  • bEscapeRegex_(int) : Whether or not the column-specific searches are regular expression objects.
  • iSortingCols: Number of columns to sort by.
  • iSortDir: Direction to sort in.

The interesting parts for us at the moment are iDisplayLength and iDisplayStart, which tell us how many rows to send back, and where in the results to start. Essentially, they're the numbers to feed into MySQL's limit clause.

In the earlier example URL, we're starting at the beginning, at iDisplayStart=0, and reading 10 values; iDisplayLength=10, which is the default for DataTables.

In get_data.php, we already have an "initialize variables" section, with values hardcoded.

Replace that section with this code:

// { initialize variables 
// { amount of records to show
$amt=10;
if(isset($_REQUEST['iDisplayLength'])){
$amt=(int)$_REQUEST['iDisplayLength'];
if($amt>100 || $amt<10)$amt=10;
}
// }
// { where to start showing the records from
$start=0;
if(isset($_REQUEST['iDisplayStart'])){
$start=(int)$_REQUEST['iDisplayStart'];
if($start<0) $start=0;
}
// }
// }

That just reads in what's requested, and makes sure the numbers are sane.

We already wrote the queries in such a way that they accept variable starts and row numbers. So, that's basically it—you can now load the next page, change the visible number, and so on.

Next, we need to fix it so that column sorting is obeyed.

Sorting by column

In the URL string shown in the last section, there are a few parameters to do with sorting:

  • iSortingCols: This defines the number of columns that we are sorting. (We'll stick with just one for this article.)
  • iSortCol_0: This defines the first column to sort. The value is numerical, starting with 0, and corresponds to what columns are displayed in the table, not the fields in the database.
  • iSortDir_0: This defines the direction the column should be sorted in. Handily, this value is either asc or desc, which we can plug directly into the query.

To make use of the numerical nature of iSortCol_0, we will add an array of column names to get_data.php. Add it to the "initialize variables" block:

$cols=array('ccode','city','longitude','latitude');

And then, we will generate MySQL's order by clause's information by adding the following just below this line:

// { sort by 
$scol=0;
if(isset($_REQUEST['iSortCol_0'])){
$scol=(int)$_REQUEST['iSortCol_0'];
if($scol>3 || $scol<0) $scol=0;
}
$sdir='asc';
if(isset($_REQUEST['iSortDir_0'])){
if($_REQUEST['iSortDir_0']!='asc') $sdir='desc';
}
$scol_name=$cols[$scol];
// }

Again, just a little sanitizing goes into it. The values asc and desc are sanitized by recognising that there are only two possible values. If it's not one, it must be the other.

And the main query is then amended to include order information:

$rs=dbAll("select ccode,city,longitude,latitude 
from cities
order by $scol_name $sdir limit $start,$amt");

You can now do interesting queries, such as finding the most northern cities in the world by sorting in descending order by latitude:

// { search 
$search_sql='';
if(isset($_REQUEST['sSearch']) && ''!=$_REQUEST['sSearch']){
$stext=addslashes($_REQUEST['sSearch']);
$search_sql='where ';
if(strlen($stext)==2) $search_sql.="ccode='$stext' or ";
$search_sql.="city like '$stext%'";
}
// }

Canada, Greenland, and Svalbard (part of Norway)—brr!

Notice that some of the entries are repeated. This is because my sample database includes alternative spellings as well. Numerous separate spellings, and Ny-Ålesund only has 40 inhabitants!

Filtering

Of course, no data table is complete without filtering. There's no point having a few million results if you can't narrow it down to a manageable level.

The URL string we're working with includes a number of sSearch parameters: the sSearch parameter itself and an sSearch_0/1/2/3 parameter for each of the table columns. We will only use the main sSearch in this article's example.

In our example, we will take the string we're given, and match it against the beginning of the city name field, and if there are exactly two letters, will also match it against the country.

Server-side code

First, we need to set up MySQL's where clause. Add this to the "initialize variables" section of get_data.php:

// { count records after filtering 
$total_after_filter=$total_records;
if($search_sql){
$r=dbRow("select count(ccode) as c from cities $search_sql");
$total_after_filter=$r['c'];
}
// }

This section builds up a $search_sql string if needed, which compares against city and optionally also against the country code.

Now, we can set up the iTotalDisplayRecords variable correctly.

Add this below the "count existing records" section:

echo 
'{"iTotalRecords":'.$total_records.',
"iTotalDisplayRecords":'.$total_after_filter.',"aaData":[';
$rs=dbAll("select ccode,city,longitude,latitude
from cities $search_sql
order by $scol_name $sdir limit $start,$amt");

And we then also need to change the main query, and to add in the iTotalDisplayRecords to the opening of the returned JSON object:

jQuery.fn.dataTableExt.oApi.fnSetFilteringDelay = 
function ( oSettings, iDelay ) {
iDelay = (iDelay && (/^[0-9]+$/.test(iDelay))) ? iDelay : 250;
var $this = this, oTimerId;
var anControl = $( 'div.dataTables_filter input:text' );
anControl.unbind( 'keyup' ).bind( 'keyup', function() {
var $$this = $this;
window.clearTimeout(oTimerId);
oTimerId = window.setTimeout(function() {
$$this.fnFilter( anControl.val() );
}, iDelay);
});
return this;
}
$(document).ready(function(){
$('#the_table').dataTable({
'bProcessing':true,
'bServerSide':true,
'sAjaxSource':'get_data.php'
}).fnSetFilteringDelay();
});

When that's complete, you can run queries in the browser. Here's an example run against my own City:

Data Tables and DataTables Plugin in jQuery 1.3 with PHP

If you run this yourself, you'll see that every time you hit a key, a query is sent to the server. As I've said earlier in the book, this is a very bad idea, which can cause race conditions and overloading on the server.

We'll solve that now.

Setting a delay on the filter

To avoid overloading your server, you need to query the data only when you've actually finished typing.

The DataTables plugin itself can be extended with further plugins, one of which is called fnSetFilteringDelay, created by Zygimantas Berziunas, which delays the sending of the query until after you've stopped typing.

To include it, simply copy and paste from the DataTables plugins page into your tables.html page, above the $(document).ready section, and then activate it by chaining it to your dataTable call.

Here is the JavaScript in full, with comments removed from the fnSetFilteringDelay plugin for readability (the license for the plugin is GPL2 or BSD3.x):

jQuery.fn.dataTableExt.oApi.fnSetFilteringDelay = 
function ( oSettings, iDelay ) {
iDelay = (iDelay && (/^[0-9]+$/.test(iDelay))) ? iDelay : 250;
var $this = this, oTimerId;
var anControl = $( 'div.dataTables_filter input:text' );
anControl.unbind( 'keyup' ).bind( 'keyup', function() {
var $$this = $this;
window.clearTimeout(oTimerId);
oTimerId = window.setTimeout(function() {
$$this.fnFilter( anControl.val() );
}, iDelay);
});
return this;
}
$(document).ready(function(){
$('#the_table').dataTable({
'bProcessing':true,
'bServerSide':true,
'sAjaxSource':'get_data.php'
}).fnSetFilteringDelay();
});

What it does, is to remove keyup event of DataTables from the search box, and replace it with a less eager version, which will wait until you are finished typing before sending off the query.

Summary

In this article, we have learned how to display data using a plugin that allows the data to be sorted, searched, and paginated.

To summarize, we looked at:

  • How to install and use the DataTables plugin
  • How to load data pages on request from the server
  • Searching and ordering the data

If you have read this article you may be interested to view :

About the Author :


Kae Verens

Kae Verens is an owner manager of the web-development company Webworks.ie and is currently secretary of the Irish PHP Users Group. He has been writing in JavaScript since the mid 90s, and in PHP since the late 90s. Kae is the creator of the file management system KFM, the CMS WebME (used by Webworks.ie for over 200 separate clients), and the author of the Packt book jQuery 1.3 with PHP.

 

Books From Packt

Joomla! with Flash
Joomla! with Flash

Joomla! 1.5 SEO
Joomla! 1.5 SEO

Symfony 1.3 Web Application Development
Symfony 1.3 Web Application Development

Plone 3 for Education
Plone 3 for Education

JBoss Tools 3 Developers Guide
JBoss Tools 3 Developers Guide

PHP Team Development
PHP Team Development

JBoss RichFaces 3.3
JBoss RichFaces 3.3

jQuery UI 1.6: The User Interface Library for jQuery
jQuery UI 1.6: The User Interface Library for jQuery

 

Your rating: None Average: 4.1 (10 votes)
Thanks! by
So much easier to use with a step-by-step tutorial, rather than the documentation. Greeetings, George
Hi by
This is great! tried the documentation on datatables' site, but this is much easier to understand. To make this work with the latest version, change the name of this variable iSortDir_0 to -> sSortDir_0
show/hide hidden row information by
hi mr . kae I was pleasure reading and practicing and coding your explanation about DAtatables. only A person that knows mistakes that could occur in coding an example posibilytes an step by step example. thanks. now there is an example about show/hide information into a row. in server side processing item . he author is not clear in some cases and in API the example is not clear because adds some lines that there are not in initial one. I beg you to take a look at this article to send us a light to do a good code baout this important plugin. thanks again. carlos
thanks so much for the example by
Would it be possible to write a similar great explanation on adding Jeditable to DataTables? Thanks again, E
hi by
hi Thanks for the tutorial, but can you explain me more on the sort ? if i have only 2 fields then I will make $cols=array('idnota','tanggalnota'); actually I'm confused with this part: // { sort by $scol=0; if(isset($_REQUEST['iSortCol_0'])){ $scol=(int)$_REQUEST['iSortCol_0']; if($scol>3 || $scol<0) $scol=0; } $sdir='asc'; if(isset($_REQUEST['iSortDir_0'])){ if($_REQUEST['iSortDir_0']!='asc') $sdir='desc'; } $scol_name=$cols[$scol]; // } I still can't choose between asc and desc through the GUI. other works fine :) Thanks
problem running a example by
hi... i'm trying to run some your example and an get allways the same error: DataTables warning: JSON data from server failed to load or be parsed. This is most likely to be caused by a JSON formatting error. when i run the get_data i got the same result as you. But when i run the tables.html only shows the table structure without the data from the database. I've tried order example and got always the same result. thanks for your attention
Question regarding the table display by
Hi Kae, first of all I would liek to thank you for a great tutorial. I have a a question. I have been using your example but I have not been able to display the table. I was only able to display the table with no backgroud, css and nothing. it's justa table that is displayed. My jquery.min.js and datatables are in same directory but still nothing shows up. Want to know that do i need to get any flash player or anything like that in order to run this example. Please let me know as soon as possible. Thanks
Thanks! by
Thanks, this tutorial is great. I have one problem, however. I've copied your code over directly, I've only changed the database and directory info. Even though the iTotalRecords and iTotalDisplayRecords are passing the correct values (i've checked the JSON output), my table still just says "displaying 10 out of 10" at the bottom and disables the forward button. It's quite a mysterious problem, and totally disables AJAX pagination...
The same trick with ASP/SQL Server by
Hello Kae, Great coding, but could you give me a clue for the same trick in classic ASP en SQL Server? Or is that too far from home? Greetings, Robert
Thank you very much by
Thank you very much for this great tutorial. I've been trying to get a functional datatable for my website for almost a week now with just a few hopeful attempts till i finally reached your article. I appreciate how much detail you put into every single step explaining why we are putting every single line of code. So many tutorials around but this is the only one worked %100 for me.

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Z
U
D
V
m
7
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software