Editing jquery datatable data

Editing table data

http://www.codeproject.com/Articles/194916/Enhancing-HTML-tables-using-a-JQuery-DataTables-pl#Ajax

You can find code on the DataTables site where you can see how to implement inline editing of cells in the table using the jEditable plug-in. As an alternative, you can use the DataTables CRUD plug-in that enables editing cells,deleting rows, and adding new records in the table. An example of a fully editable DataTable is shown in the following figure:

An example of initialization of the editable plug-in is shown in the following listing:

 Collapse | Copy Code

 $('#example').dataTable().makeEditable(); 

There are a lot of configuration properties that can be used in order to configure CRUD functionalities. An example is shown below:

 Collapse | Copy Code

 $('#example').dataTable()   .makeEditable({         sUpdateURL: "UpdateData.php",         sAddURL: "AddData.php",         sDeleteURL: "DeleteData.php",         aoColumns: [                         null,                 {             },             {                 type: 'textarea'             },             {                 type: 'select',                 onblur: 'cancel',                 submit: 'Ok',                 loadurl: 'EngineVersionList.php',                 sUpdateURL: "CustomUpdateEngineVersion.php"             },              {                 type: 'select',                 onblur: 'submit',                 data: "{'':'Please select...', 'A':'A','B':'B','C':'C'}"             }         ]  });

In this configuration are defined server-side URLs that will be called when the user actually edits, deletes, or adds a new record. Also, in each of the columns is defined a different editor. The first column is read only, the second one uses the default setting (inline text box), the third uses a text area instead of text box, while the other two columns use drop-down lists. The fourth column will load values for the items that will be displayed in the list from the server-side page defined in the loadurl parameter, and it will post the edited values to the column specific sUpdateURLparameter instead of the global editing URL defined in sUpdateURL. The select lists that are used for editing of the cells in the fifth column have list items that are defined locally in the data parameter. There are a lot of additional settings you can find on the DataTables CRUD site.