Why doesn't my "create new record" or edit/delte icons work

drfunk

http://live.datatables.net/dugigipe/1/edit

kthorngren

First, you are getting this error:

Uncaught TypeError: Cannot read properties of undefined (reading 'style')

You have defined 3 th in the header but have for columns of data.

Second, I might be missing it but I don't see any event handlers for your buttons. See this example explaining how to create jQuery events. See this example with buttons in a column:
http://live.datatables.net/xijecupo/1/edit

Kevin

drfunk

forgot to include the javascript

drfunk

This error just started when I added the icons

Uncaught TypeError: Cannot read properties of undefined (reading 'style')
not sure why

drfunk

so I guess I am missing an event handler?

drfunk

not getting this error anymore:
Uncaught TypeError: Cannot read properties of undefined (reading 'style')

drfunk

http://live.datatables.net/cihuvamo/1/edit

kthorngren

Did you try the example I linked to?
http://live.datatables.net/xijecupo/1/edit

It shows how to create a click event for buttons in the columns and to get the row data.

Kevin

drfunk

yes I did. Didn't seem to do anything for me..

However I did try this If you click on any row it does alert
http://live.datatables.net/cihuvamo/1/edit
but it says
You clicked on undefined row
I was hoping it would have the module value

kthorngren

Your test case is confusing as you have JS code in both the HTML tab and the JS tab. You are using this code for your click event:

    $('#modport tbody').on('click', 'tr', function () {
        var data = table.row( this ).data();
        alert( 'You clicked on '+data[0]+' row' );
    } );

data[0] is for array data but you are using objects. You will need to use data.Module, like this

http://live.datatables.net/tajuqobu/1/edit

Likely you will need a more specific selector so you can determine if edit or delete was clicked.

Kevin

drfunk

Likely you will need a more specific selector so you can determine if edit or delete was clicked. I am not sure what you mean here.

kthorngren

Take a look at the example I posted:
http://live.datatables.net/xijecupo/1/edit

It has this:

$('#example tbody').on('click', '.name', function () {

The classname name is assigned to the Name button. You will need something similar so you know when you click on the edit or delete buttons. You can use a classname, like this:
http://live.datatables.net/tajuqobu/2/edit

Kevin

drfunk

ok got it.. so if I want my edit, add & delete to work like this:
https://editor.datatables.net/examples/simple/inTableControls.html
Does that require PHP? or can I accomplish the same without?

colin

If you want it to behave like Editor, it would be worth buying an Editor license, rather than redeveloping the wheel Editor includes both the browser-side code, and the PHP for the server to update the data source,

Colin

drfunk

um ok well I really do not use it enough to buy a license. just was hoping to get an answer to adding, editing and deleting

kthorngren

If you want to save the edits to a database then you will need to use an ajax request to send the updated data to the server. In your event handler for the buttons you will package the data to send via ajax and in the success function you will update the client side Datatable.

Kevin

drfunk

Hi Kevin,

Yea I have that piece already written. I am having an issue getting the "create record", "Edit" & "Delete" stuff to work. Just need an example of how to add a record or deleting a record

kthorngren

For creating a new record you will need a create button, like the example you linked. It will present a form with all the fields then, when submitted, an ajax request is sent to the server. There is nothing Datatables specific about this.

To delete a record you can submit, via ajax, the whole or of data or just the unique row id. Likely you will want a confirmation message. You can get the row data this similar to the edit example posted earlier:
http://live.datatables.net/tajuqobu/2/edit

To edit you will get the row data, like the example, and populate a form with the data. Then send the data, via ajax, to update the record in the DB.

Except for getting the row data of the clicked row there is nothing specific to Datatbles for the above processes. Stack Overflow or other tutorials will be the pale to look for information of how to submit edit forms to the server for updating the database.

Once the database has been updated then the server script should provide a response to the client. The ajax success function will receive the response. There are a couple of options for updating the Datatables data. The simple option is to use ajax.reload() to refresh the table from the database. The other is to have the server respond with the specific updates an Datatables updates the specific records in the table, similar to the Editor client/server protocol. Use the following API's to update the data:

• row.add() to create a row
• row().data() to update the edit data
• row().delete() to delete the data

Kevin

kthorngren

When I first started with Datatables I was new to Javascript and HTML I decided the small cost of Editor was well worth my time. It would have taken me a long to to work out the code needed for basic editing. Purchasing it allowed me to concentrate on the rest of the application.

Kevin

drfunk

hi Kevin,

So I tried this for deleting a record:

 // New record
 33         $('#modport tbody').on('click', 'create', function () {
 34            var jRow = $('<tr>').append('<td>Module</td>','<td>Ports</td>','<td>Edit</td>','<td>Delete</td>');
 35            table.row.add(jRow).draw();
 36     } );
 37    
 38     // Edit record
 39     $('#modport tbody').on('click', 'tr .fa-pencil', function () {
 40         var data = table.row( this.closest('tr') ).data();
 41         alert( 'Edit:n '+data.Module+' row' );
 42     } );
 43     
 44     // Delete a record
 45     $('#modport tbody').on('click', 'tr .fa-trash', function () {
 46         var data = table.row( this.closest('tr') ).data();
 47         data.row( this ).delete();
 48     } );

but it say " table is not defined"

colin

Check and see if it is defined, it sounds like a generic variable out of scope. But as I said before, it would be easier to look at Editor - we'll be happy to support any issues with your Editor implementation

Colin

kthorngren

Sounds like you haven't defined the variable table or you defined it in a different context. For example:
http://live.datatables.net/xijecupo/1/edit

Note the var table = $('#example').DataTable({ .. }) to define the variable table which has an instance of the Datatables API.

Kevin

drfunk

yep so I added it

    var table = $('#modport').DataTable;
    // New record
        $('#modport tbody').on('click', 'create', function () {
           var jRow = $('<tr>').append('<td>Module</td>','<td>Ports</td>','<td>Edit</td>','<td>Delete</td>');
           table.row.add(jRow).draw();
    } );

    // Edit record
    $('#modport tbody').on('click', 'tr .fa-pencil', function () {
        var data = table.row( this.closest('tr') ).data();
        alert( 'Edit:n '+data.Module+' row' );
    } );

    // Delete a record
    $('#modport tbody').on('click', 'tr .fa-trash', function () {
        var data = table.row( this.closest('tr') ).data();
        data.row( this ).delete();
    } );

now I get "TypeError: table.row is not a function"

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

This is incorrect:

var table = $('#modport').DataTable;

Use this with the parenthesis ():

var table = $('#modport').DataTable();

Kevin

drfunk

ok got it

var table = $('#modport').DataTable();
// New record
    $('#modport tbody').on('click', 'create', function () {
       var jRow = $('<tr>').append('<td>Module</td>','<td>Ports</td>','<td>Edit</td>','<td>Delete</td>');
       table.row.add(jRow).draw();
} );

// Edit record
$('#modport tbody').on('click', 'tr .fa-pencil', function () {
    var data = table.row( this.closest('tr') ).data();
    alert( 'Edit:n '+data.Module+' row' );
} );

// Delete a record
$('#modport tbody').on('click', 'tr .fa-trash', function () {
    var data = table.row( this.closest('tr') ).data();
    table.row( data ).delete();                       <===================
} );

new error:
"table.row(...).delete is not a function"

kthorngren

$('#modport tbody').on('click', 'tr .fa-trash', function () {
    var data = table.row( this.closest('tr') ).data();
    table.row( data ).delete();                       <===================
} );

table.row( this.closest('tr') ).data();

Returns the data for the row. This won't work as a row-selector. Use something like this:

$('#modport tbody').on('click', 'tr .fa-trash', function () {
    var row = table.row( this.closest('tr') );
    table.row( row ).delete(); 
} );

Kevin

drfunk

hmm...

var table = $('#modport').DataTable();
// New record
    $('#modport tbody').on('click', 'create', function () {
       var jRow = $('<tr>').append('<td>Module</td>','<td>Ports</td>','<td>Edit</td>','<td>Delete</td>');
       table.row.add(jRow).draw();
} );

// Edit record
$('#modport tbody').on('click', 'tr .fa-pencil', function () {
    var data = table.row( this.closest('tr') ).data();
    alert( 'Edit:n '+data.Module+' row' );
} );

// Delete a record
$('#modport tbody').on('click', 'tr .fa-trash', function () {
  var row = table.row( this.closest('tr') );
  table.row( row ).delete();
} );

still getting this error:

   Uncaught TypeError: table.row(...).delete is not a function

kthorngren

The API to use is row().remove() not delete(). You will need to add draw() to update the table display, something like ths:

table.row( row ).remove().draw();

Kevin

drfunk

yay thank you.. that worked!! I owe you like a case a beer!!

drfunk

http://live.datatables.net/dugigipe/4/edit
Ok I am getting real close I have delete working and the popup for the create record.
but when I click the create button the new row is not added.
is my function "addModule" with table.row correct?

drfunk

now new row is added but only the Module value