Creating perfect tables with DataTables and Jeditable jQuery plugins

data_tablesThere is no doubt that we all love jQuery. Creating simple tables was so 2006. In this tutorial I will show you how you can use DataTables and Jeditable jQuery plugins to create simply awesome tables. Let’s check out the features first.

  • Tables with pagination on the fly
  • Sort and search data
  • Ability to edit data within tables
  • Saving table state in Cookies

 

Note: I always try to achieve the following with my code.

  • Easy to understand
  • Code comments
  • Properly formatted

 

Here are the two most important links. Demo or Download

 

To begin with, we will first check out how our table structure looks like so that it is as per the requirements of the dataTables plugin. The data for the table can come from the database or can be manually feeded. Have a look at the HTML code below.

It is necessary to specify the <thead></thead> and <tbody></tbody> tags where thead is for the table heading and tbody is for the table body which is our content. I have given each tr it’s own ID which is required when making AJAX requests so that we know which content needs to be updated or deleted. Let’s check out the jQuery code below.

So, that’s all with the jQuery part. I suggest you to check out the demo completely and try out all the features to see how enhanced the table is than the usual one. There’s one exercise for you all. I have intentionally left out one part of the code unexplained. Can you figure out which part is that? I await your response in the comments.

  • Amr Dam

    very very nice but u can explain more

  • Vicky Victor M

    Good tutorial I used your code it’s helpful,….

    For updating I retrieved the name of the column in the database because $column is a number and as Amr Dam tried it cant be possible to update…

    $fetch = mysql_query(“SELECT * FROM pageContent” );//From my table in DB

    $columnName=mysql_field_name($fetch, $column);//Find the name of the column in my table

    $sql = “UPDATE pageContent SET $columnName=’”.$new_value.”‘ WHERE Id=”.$c_id.””;

    $result=mysql_query($sql);

    • Amr Dam

      thank u Vicky Victor M

      it work good with this function
      very nice work

    • ykinman

      hi vicky victor m,

      may i check with you which part of the code should i paste your code?
      is it inside the if loop?

      if(!empty($column) && !empty($c_id)) {

      /*

      @@ Updating the information

      Ideally, we should be updating the entry in the database

      */

      ## Sending result back to the page

      echo ‘success,’.$new_value;

      } else {

      echo ‘error,Empty values.’;

      }

      thanks!

      • Vicky Victor M

        Of course in the first if ….

        if(!empty($column) && !empty($c_id)) {

        /*

        @@ Updating the information

        Ideally, we should be updating the entry in the database

        */

        ## Sending result back to the page

        echo ‘success,’.$new_value;

        }

        • ykinman

          that’s strange. I get a boolean given in the following line.

          $columnName=mysql_fetch_field($fetch, $column);

          and when i tried to print $columnName it gives me nothing

          • Vicky Victor M

            Maybe the problem is your query,you have to verify if your query returns something.

  • bill blythyn

    Nice example. The best and easiest to follow. Thanks. How would I a add a row to the table

  • bakacchi

    I always got this error message :

    DataTables warning (table id= ‘table1′): Requested unknown parameter ’5′ from the data source for row 2

    well, the data is still updated.. but the message is very annoying >.<

    anyone can help?

  • Patrick

    Hi Akshit,

    Nice post man!
    I would like to share a live edit system for Datatables.js

    Check out – bitconfig.com/data-tables/bitconfig_data_tables.html

    -Patrick

  • Milo

    Hi,

    I try to use your example but i have a little problem. When i use the delete link i see a GET param with firebug but when i want to edit data nothing happen and nothing appears on firebug.

  • Alexsander Wichert

    how can I use this table with mysql?

  • Jaime Niñoles

    That’s great!