This plugin is no longer supported by KingKode.
Please check out Kasper Olesen’s repository for active updates.
Datatables is an open source plugin JQuery for creating tables with pagination, search, filters, and a wide array of other features. Most of the extensions of this tool are free to use but some which that are very useful require a license.
One such licensed plugin is the Datatables Editor, which is used to modify contents of the table. There is a free trial license for the Datatables Editor plugin which all its features can be used free for just 15 days.
For those developing small applications, this license is pretty expensive for just using its simple editing functionality. So I have written a plugin for simple editing functionality of the Datatables Editor plugin using bootstrap modals, the Buttons extension, & the Select extension.
NOTE: This plugin DOES NOT connect to a database, it is ONLY for client side data manipulation and visuals. This plugin also REQUIRES Twitter Bootstrap.
Working Example via jsfiddle
Screenshots for the Editor alternative
Scripts to include
// jQuery // bootstrap // dataTables // dataTables.buttons // dataTables.select // dataTables.responsive // dataTables.altEditor
Stylesheets to include
// bootstrap // dataTables // dataTables.buttons // dataTables.select // dataTables.responsive
Initialize Datatables
var dataSet = [
["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800"],
["Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750"],
["Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000"],
["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060"],
["Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700"],
["Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000"],
["Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "$137,500"],
["Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "$327,900"],
["Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009/09/15", "$205,500"],
["Sonya Frost", "Software Engineer", "Edinburgh", "1667", "2008/12/13", "$103,600"],
["Jena Gaines", "Office Manager", "London", "3814", "2008/12/19", "$90,560"]
];
var columnDefs =
[
{ title: "Name" },
{ title: "Position },
{ title: "Office" },
{ title: "Extn." },
{ title: "Start date" },
{ title: "Salary" }
];
var myTable;
myTable = $('#example').DataTable({
"sPaginationType": "full_numbers",
data: dataSet, // data from above
columns: columnDefs, // columns from above
dom: 'Bfrtip', // element order: NEEDS BUTTON CONTAINER (B) ****
select: 'single', // enable single row selection
responsive: true, // enable responsiveness
altEditor: true, // Enable altEditor ****
buttons: [{
text: 'Add',
name: 'add' // DO NOT change name
},
{
extend: 'selected', // Bind to Selected row
text: 'Edit',
name: 'edit' // DO NOT change name
},
{
extend: 'selected', // Bind to Selected row
text: 'Delete',
name: 'delete' // DO NOT change name
}]
});
I was hoping you might be able to assist with using this tool. I have installed according to the manual and installation instructions, however I cannot get the buttons to respond. I added debugging statements into the altEditor.js file, but they never seem to fire off, just like the buttons.
I first thought it might be the AJAX loaded data, but then I went ahead and used the JS from your Fiddle and I’m getting the same results. I tried using the same resources you’re using, as well as newer versions, but can’t seem to get the modals to trigger, and there’s nothing showing in the console.
Any direction is GREATLY appreciated.
Hello, Your plugin is very, very good indeed!
Thanks for making this plugin available. I would like to know how I can change the receipt of the current format that is this:
[
[“Tiger Nixon”, “System Architect”, “Edinburgh”, “5421”, “2011/04/25”, “$ 320,800”)
]
for this:
{
“ITotalRecords”: 1,
“ITotalDisplayRecords”: 1,
“AaData”: [
{
“Company”: “Bosch”,
“Country”: “Germany”,
“Year”: {
“Year”: 2016,
“Month”: 12,
“Day”: 20
},
“Revenue”: 200.00,
“Id”: 1
}
]
}
Hello there.
I was wondering how can I select only certain fields in edit modal? In my datatable rows there are checkboxes and passwords I need to not have them shown in edit modal.. May I know how to do this? 🙂 Great code btw it makes life easier thanks. 🙂
Description: This plugin DOES NOT connect to a database.
Then it is no use to me. Let me know if it is possible to connect this plugin to DB.
Hi,
If i have multiple datatables in page, Add button is adding to all tables on the page. Is it a bug?
Thanks.
I have installed this plugin, some column are showing as undefined in bootsrap modal.
Hi.
Who I make selekt colls to editor? I must take only two colls, not all.
how I can add export options?
Hi guys, How to create/edit/delete data via http request based on this example or kAlex modified? Thanks.
Alright so I realized that codeshare.io isnt the best place to share code and I also made a user here on this site in the mean time. So I wanted to update my comment with my new version of the Datatables-altEditor, although it is not possible to edit, so new comment here we come.
I made an updated version of this Datatables-AltEditor which can be found here:
https://github.com/KasperOlesen/DataTable-AltEditor
My version is updated with:
– AJAX calls for sending and receiving data to/from server
– Input validation with regex
– Duplicate data validation (only in one version)
– Changed modals slightly
There are currently 2 versions:
– one that sends the individual rows (create/edit/delete) to the server and relies on the server to check for duplicates.
– another that sends the whole datatable to the server and has duplicate date check when adding/editing row
Currently I haven’t had time to edit the readme file to explain how to use it properly, but I will soon. Feel free to use it in any way, but credit should go to the original author as I only added these extra features to his version.
Great work, Kasper!
Go ahead and add your author credentials into the head of the script to credit your contribution. We all should see how we can expand this script to get all the bells and whistles people expect.
If you don’t mind, I would like to update the packaged version downloadable here with yours.
Thank you very much. I wouldn’t mind at all, that would be great. I am going to tweak and polish it just a bit more on the next two weekends and make an example of how to initialize a datatable with it, so I would recommend waiting for the update before adding it, but it’s up to you.
I just had a bit of spare time on my hands, so i updated the repository with an example of how to initialize a datatable with the new version, explaining all the possible parameters etc. and changed some of the comments in the editor for a better understanding.
The link is here:
https://github.com/KasperOlesen/DataTable-AltEditor/tree/master/Owerwrite%20all%20data
I think the files are now in a state where they could be added to this project, but I will keep tweaking them as I get the time to do so. If there is a request for new functionality or if you have an idea for any, just let me know and I will look into it.
Have a nice friday!
Thanks for the alternative!
I have a small question:
I’m working on a datatable where the first column is an auto-incremented field (like an ID).
I do not wish the user to be able to set values for this column while adding a new row.
Also, I do not wish the user to be able to edit the values for this column.
How can this be done using your editor?
I have done exactly this in my version. See my comment above, or download the updated version here:
https://github.com/KasperOlesen/DataTable-AltEditor
Hi
First of all i really appreciate the free editor. I Just wanted to say that i have reworked it so it works with server communication and also added input validation.
Here is a link to a datatable example and the reworked editor code: https://codeshare.io/Z4hbJ
Hi,
first thanks for your work that are really helpfull.
regarding this editor, i’m struggle in in particular point, in your sample you are saying that columns should be
{ title: “Name” }
but in my case, i’m returning data from a webservice with json and have this for the columns:
{ data: “Id” }
Buttons appear, select works, popup shows, labels for each fields are showing, but in the textfield appear “undefined”… so checking with you… can your editor work with this scenario?
Thanks for your help.
Thank you for your kind words. Unfortunately, in its current state, this extension does not support your scenario. I will take a look at it over the weekend and try to get the script updated to fit this situation.
Thank you Sr. for your reply. Finnaly found where is the issue and how to solve it if helps.
Line 267, where said “adata.data()[0][j]” should said “adata.data()[0][columnDefs[j].title]” to use the name of the field instead of index.
I’m not a formal developer, but trying find it.
Taking advantage of your help… where i have to add the call of a webservice to send the parameters of the form to create, update o delete rows?
Can you help me please?
Thanks in advance.