Free Datatables Editor Alternative

Free Datatables Editor Alternative

Free Datatables Editor Alternative

Download Datatables Editor Alternative

This plugin is no longer supported by KingKode.
Please check out Kasper Olesen’s repository for active updates.

View Demo on jsFiddle

Support this Developer

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.responsive
 // dataTables.altEditor
Stylesheets to include
 // bootstrap
 // dataTables
 // dataTables.buttons
 // 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
Working Example via jsfiddle

Join the Conversation

Loading Facebook Comments ...

19 thoughts on “Free Datatables Editor Alternative

  1. AvatarDan

    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.

  2. Avatarklermann

    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

  3. AvatarDomy

    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. 🙂

  4. AvatarkAlex

    Alright so I realized that 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:

    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.

    1. kingkodekingkode Post author

      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.

      1. AvatarkAlex

        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.

      2. AvatarkAlex

        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:

        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!

  5. AvatarEl Nappa

    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?

  6. AvatarFederico

    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.

    1. kingkodekingkode Post author

      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.

      1. AvatarFederico

        Thank you Sr. for your reply. Finnaly found where is the issue and how to solve it if helps.

        Line 267, where said “[0][j]” should said “[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.

Leave a Reply

Privacy Preference Center