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
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
$('#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
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,
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.
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
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:
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.
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
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
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"
$('#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();
} );
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
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?
Answers
First, you are getting this error:
You have defined 3
thin 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
forgot to include the javascript
This error just started when I added the icons
Uncaught TypeError: Cannot read properties of undefined (reading 'style')
not sure why
so I guess I am missing an event handler?
not getting this error anymore:
Uncaught TypeError: Cannot read properties of undefined (reading 'style')
http://live.datatables.net/cihuvamo/1/edit
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
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
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:
data[0]is for array data but you are using objects. You will need to usedata.Module, like thishttp://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
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.
Take a look at the example I posted:
http://live.datatables.net/xijecupo/1/edit
It has this:
The classname
nameis 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
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?
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
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
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
successfunction you will update the client side Datatable.Kevin
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
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
successfunction will receive the response. There are a couple of options for updating the Datatables data. The simple option is to useajax.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 rowrow().data()to update the edit datarow().delete()to delete the dataKevin
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
hi Kevin,
So I tried this for deleting a record:
but it say " table is not defined"
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
Sounds like you haven't defined the variable
tableor 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
yep so I added it
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
This is incorrect:
Use this with the parenthesis
():Kevin
ok got it
new error:
"table.row(...).delete is not a function"
Returns the data for the row. This won't work as a
row-selector. Use something like this:Kevin
hmm...
still getting this error:
The API to use is
row().remove()notdelete(). You will need to adddraw()to update the table display, something like ths:Kevin
yay thank you.. that worked!! I owe you like a case a beer!!
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?
now new row is added but only the Module value