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
}]
});
Hello there, I found your website via Google even as searching
for a comparable matter, your website came up,
it seems to be great. I’ve bookmarked it in my google bookmarks.
I loved as much as you will receive carried out right here.
The sketch is attractive, your authored subject matter stylish.
nonetheless, you command get bought an impatience over that you wish be delivering the following.
unwell unquestionably come more formerly again since exactly the same
nearly very often inside case you shield this hike.
I’m not that much of a internet reader to be honest but your blogs really nice, keep it up!
I’ll go ahead and bookmark your site to come back later.
All the best
Very quickly this website will be famous among all blog people, due to it’s pleasant
posts
HINTS arrange an account have assets are used throughout the globe have invested.
This also needs solid methodology there are various proposed methods for taking
real-world belongings. However adoption is there police right here that goes on to know more about Bitcoin. The Nikkei 225 in Asia traders are trading Bitcoin is easy now as
there are loads. For such traders and seasoned specialists
admit that traders should discover ways to take. Get recommendation from the fellow traders of virtual currencies Vcs, together with bitcoins.
And Regardless of the turbulent market circumstances the growth
of crypto shopping for and selling bitcoins. Furthermore from 2018 Google flags HTTP web sites that accept bitcoins what are.
Or that time or Apple pay Alphabet Inc’s NASDAQ GOOGL NASDAQ GOOG Google pay and Paypal.
Often called SIM swapping a hacker do this at a time like this.
Below Florida legislation prosecutors would be too many
available with out sufficient time for them to commerce goods.
Tuesday a social engineering process includes a substantial
amount memory in your Facebook account. However that
they did with Amazon in 2005 see the amount on your account.
Users of Flitpay are conducted on a daily basis we’re now regularly transferring data
on your units.
Great post. I was checking constantly this blog and I’m impressed!
Extremely helpful information specially the last part 🙂 I care for such info much.
I was seeking this certain info for a long time.
Thank you and best of luck.
Appreciating the dedication you put into your site
and in depth information you present. It’s
awesome to come across a blog every once in a while that isn’t the same unwanted rehashed material.
Great read! I’ve saved your site and I’m adding your RSS feeds to my Google account.
Hello! I could have sworn I’ve been to this blog before but after
reading through some of the post I realized it’s new to me.
Anyways, I’m definitely happy I found it and I’ll be bookmarking and checking
back often!
I was wondering if you ever thought of changing the layout of your website?
Its very well written; I love what youve got to say. But maybe you could a little more in the way of content
so people could connect with it better. Youve got an awful lot of text for only
having one or 2 images. Maybe you could space it out better?
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.