Usage of Editor locally for javascript object (without saving to server)
Usage of Editor locally for javascript object (without saving to server)
Evgeniy Vasyliev
Posts: 23Questions: 7Answers: 1
Hi all!
I have purchased the Editor and now am trying to make it work. In my project I am doing a microserver on MCU and it uses its own communication protocol. I need Editor for editing of the Datatable and a separate script will handle storing of the data from Datatable into the server. In other words the Editor should not use ajax, but store all the changes in javascript object.
I have tried the following code:
HTML markup:
<table id="pumpPorts" class="display" style="width:100%"> <thead> <tr> <th>Pump port</th> <th>Communication protocol</th> <th>Baud rate</th> </tr> </thead> </table>Scripts:
// Create javascript object var pumpPortsData = [ { "pumpPort": "1", "communicationProtocol": "2. UniPump", "baudRate": "4. 9600" }, { "pumpPort": "2", "communicationProtocol": "3. UniPump 15", "baudRate": "4. 9600" }, { "pumpPort": "3", "communicationProtocol": "15. Unipump 1", "baudRate": "5. 19200" }, { "pumpPort": "4", "communicationProtocol": "37. Pump simulator", "baudRate": "4. 9600" }]; // Create editor var editorPumpPorts = new $.fn.dataTable.Editor({ table: '#pumpPorts', display: 'lightbox', data: pumpPortsData, fields: [{ label: 'Pump port', name: 'pumpPort' }, { label: 'Communication protocol', name: 'communicationProtocol' }, { label: 'Baud rate', name: 'baudRate' }] }); // Create datatable $('#pumpPorts').DataTable({ paging: false, searching: false, info: false, responsive: true, select: true, dom: 'Bt', data: pumpPortsData, columns: [ {data: 'pumpPort'}, {data: 'communicationProtocol'}, {data: 'baudRate'} ], buttons: [ {extend: 'create', editor: editorPumpPorts}, {extend: 'edit', editor: editorPumpPorts}, {extend: 'remove', editor: editorPumpPorts} ] });
However at this I can not edit my javascript object and buttons "Edit" and "Remove" are not working.
Please consult if I am able to make it work in the requested way and if yes - what and how should I change.
Thanks for assistance.
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Hi,
What I would do here is to use Editor in local table editing mode and then use
rows().data()(andtoArray()to get a plain array rather than an API instance!) to get the data from the table. That way, your DataTable effectively becomes the data store and you can read from it (and thus save anywhere that is needed) at any point.Allan
Thank you, Allan!
This is exactly what I need. However seems that in this example same is as in my above code. However it is not working... Maybe you know what is bad with my code?!
Thanks!
Mmm, I got stuck with it and do not know where to watch...
If you give me a link to your page I'd be happy to take a look and debug it directly.
Allan
Thank you, Allan!
You can see the page with the problem on this link: http://technotrade.ua/Uploads/Datatables/index.html
Also I have uploaded the archive with this page to Google Docs: https://drive.google.com/file/d/1Blcol8585_nZ_9TYEV0Y4wciXvUmduPW/view?usp=sharing
As you can see I can not create/edit/delete the rows. Can you please point where can be a problem?
Thanks for the link, however I don't see a DataTable anywhere on it. Do I need to click something to make it show?
Allan
Allan, well there is DataTable, I see it clearly, tested in all browsers. Please check again: http://technotrade.ua/Uploads/Datatables/index.html
You can view a page source to prove that there is DataTable...
Earlier when I first tried this page it did not have a Datatable but a different page. Now it does have a Datatable. When I click a row then edit I see this error in the browser's console:
The link provided in the error has diagnostic steps. Take a look and see if it helps.
Kevin
Thank you, Kevin!
You are right. I added "DT_RowId" row and it worked!!!
Thank you very much for your help. Now I can move on with development.
Good luck to you!