prevent Editor to get new list

ansarigmbh · October 2014

How can I prevent Editor to get the new list from server while editing a cell or row in the server side mode? Is an option for doing this or I have to edit base code!?

allan · October 2014

I think we'll need a little more information please - can you show us an example? Editor itself will not get a new list from the server when editing a select list.

Allan

ansarigmbh · October 2014

editor = new $
                       .fn
                       .dataTable
                       .Editor({
                                   table: "#my-table
                                   fields: [
                                       {
                                           label: "Title",
                                           name: "title",
                                           data: "title.values.0.value",
                                           attr: {
                                               maxlength: 255,
                                               required: true
                                           }
                                       },
                                       {
                                           label: "In Favorites",
                                           name: "visible",
                                           type: "select2",
                                           opts: {
                                               allowClear : true,
                                               placeholder: "",
                                               width: '100%',
                                               minimumResultsForSearch: 10
                                           },
                                           def: '1',
                                           ipOpts: [
                                               {label: "visible", value: '1'},
                                               {label: "hidden", value: '0'}
                                           ]
                                       }
                                   ],
                                   ajax: function (method, url, data, success_callback, error_callback)
                                   {
                                       var form_data = new FormData();
                                       if(data['action'] == "create")
                                       {
                                           url = "somewhere-create.php";
                                           form_data.append('title', data['data']['title']);
                                           form_data.append('visible', data['data']['visible']);
                                       }
                                       else if(data['action'] == "edit")
                                       {
                                           url = "somewhere-edit.php";
                                           form_data.append('title', data['data']['title']);
                                           form_data.append('visible', data['data']['visible']);
                                           form_data.append('id', data['id']);
                                       }
                                       else if(data['action'] == "remove")
                                       {
                                           url = "somewhere-remove.php";
                                           form_data.append('id', JSON.stringify(data['id']));
                                       }

                                       $.ajax({
                                                  type: "POST",
                                                  url: url,
                                                  data: form_data,
                                                  dataType: "json",
                                                  cache: false,
                                                  processData: false,
                                                  contentType: false,
                                                  success: function (json)
                                                  {
                                                      success_callback(json);
                                                  },
                                                  error: function (xhr, error, thrown)
                                                  {
                                                      error_callback(xhr, error, thrown);
                                                  }
                                              });
                                   }
                               });

table =
                   $("#my-table")
                       .dataTable({
                                      serverSide: true,
                                     ajax:
                                     {
                                         url: "somewhere-list.php",
                                         type: 'POST'
                                     },
                                      "paging": true,
                                      "lengthMenu": [ 2, 10, 25, 50, 75, 100 ],
                                      "ordering": true,
                                      "autoWidth": true,
                                      "order": [1, "asc"],
                                      "columns": [
                                        { data: null,
                                              name: null,
                                              defaultContent: '',
                                              orderable: false,
                                              width: '16px',

                                          },
                                          {
                                              data: "title.values.0.value",
                                              name: "title"
                                          },
                                          {data: "visible",
                                              name: "visible",
                                              render: function (data, type, row)
                                              {
                                                  return data == '1'
                                                      ? "visible" : "hidden";
                                              },
                                              width: '90px'
                                          }
                                      ],
                                      "sDom": "<'dt-toolbar'<'col-xs-4 col-sm-6'T><'col-sm-6 col-xs-8'lp>r>" +
                                              "t",
                                      "tableTools":
                                      {
                                          sSelectedClass: "row-selected",
                                          sRowSelect: "os",
                                          sRowSelector: 'td:first-child',
                                          aButtons: [
                                              {sExtends: "editor_create", editor: editor},
                                              {sExtends: "editor_edit", editor: editor},
                                              {sExtends: "editor_remove", editor: editor}
                                          ]

                                      }
                                  })
                       .api();

ansarigmbh · October 2014

I've written an example. please help me...

allan · October 2014

I'm afraid I'm still not clear what the problem is - could you detail it a little bit more please? My understanding thus far is then every time you open an Editor edit view, it makes a request to the server to get new data for a select list, and you don't want it to do that. Is that correct?

Editor should not be doing that if it is, and I don't see anything in the above code that would cause it to do that.

Allan

ansarigmbh · October 2014

Hi. Thanks for replying.
Actually I opened an Editor and wrote my new values in fields and submitted the form. when Editor sends data to the server with Ajax, I don't know why DataTables get new list of current page from the server. It's like that editor redraw table after editing.

allan · October 2014

It's like that editor redraw table after editing.

It does.

DataTables must do a draw after an edit to correctly filter and sort the data in the table, which might have been modified after the edit. Since you have server-side processing enabled (serverSide: true,) the data is at the server and thus an Ajax request is required.

There is no option to disable that other than to modify the Editor source, as it is designed to operate this way.

Allan

ansarigmbh · October 2014

Your reason might be true. but in my case I have lots of problem with redrawing.
for example

1- I can not tab between columns for editing.

2- Two AJAX call for every editing that can make my server App busy but One AJAX request is enough for editing data.

3- Missing editing row because of going the editing row to another page when sorting is enable.

please help me to disable this feature in source code!

allan · October 2014

1- I can not tab between columns for editing.

The tab example should work with server-side processing enabled when using Editor 1.3.3.

2- Two AJAX call for every editing that can make my server App busy but One AJAX request is enough for editing data.

Yes, unfortunately the Editor payload cannot currently contain the DataTables payload as well. So it needs one Ajax request for the edit and then another for the DataTables draw. That is an unfortunate side effect of using server-side processing.

3- Missing editing row because of going the editing row to another page when sorting is enable.

The edited row moves page due to the sort? That would happen on client-side processing as well if the row has to move sort position.

please help me to disable this feature in source code!

Search for if ( __dtIsSsp( dt ) ) { in the code. In the create and edit handlers, just comment out the call to the draw() method. That will stop it doing a redraw and won't show the latest data from the server (which the draw is needed for).

Allan

ansarigmbh · October 2014

Thanks for replying :-)

The tab example should work with server-side processing enabled when using Editor 1.3.3

yes but because of redrawing the "cell" doesn’t exist after drawing:

 var cell = $('div.DTE').parent();

The edited row moves page due to the sort?

No. Edited row will go to other pages. current page will not change.

Thanks for helping about source. I commented out the call to the draw() and it was edited correctly but the value of the cell didn't change to the new value in client :-(

allan · October 2014

but the value of the cell didn't change to the new value in client :-(

That is correct - that is what the draw does in server-side processing mode. It requests the new data from the server. If you want refresh data in server-side processing mode, the Ajax request is not optional.

Allan

swciarleglio · October 2014

Where is the source code in the JS file? I cannot seem to find it when doing a search in editor.min.js?

EDIT: Nevermind. Can't edit the trial version. Downloaded and purchased 1 developer license only to see that even removing the code does not fulfill the need.

There really needs to be an override option, so that upon edit, it does a draw just based on the current view represented (as if it was client side for that single instance); understanding that the data will not be resorted, refiltered, etc (until filter/sort is clicked or the page is refreshed, and therefore reapplied). I recognize this would cause a break in seeing if the data had been updated elsewhere, but you're already going to have that if multiple users are working the same data anyways.

Otherwise, with respect and apologies, the server-side processing + inline functionality is simply unusable.

allan · October 2014

Hi,

When using server-side processing every draw of the data must make a call to the server to get the data. This is because the server is the one which will sort and filter the data - so if the edit means that the row moves in the current sort - then it is only the server that can do that, since the fully data set is there and not at the client-side.

The change that I think should be made is that Editor's Ajax return from the edit request should include the server-side processing data for the next draw - meaning that there is only one Ajax request rather than two.

Allan

minifiredragon · March 2015

I am not sure if the coding on this topic has changed, but the answer seems contrary to the example page given here: https://editor.datatables.net/examples/inline-editing/simple.html

There is 1 call the server, not 2. In the above example it POSTs the data and gets a response, updates the field and you can continue. But that is not what it is doing when I try the code. It POSTs and then GETs the table again. And when it does that, the ...Processing... bar never leaves and I get a "too much recursion" error in the console.

ansarigmbh · March 2015

There's 1 because server side is false

allan · March 2015

Can you link to a page that shows the problem please.

Allan

dsxconcept · April 2015

prevent Editor to get new list

prevent Editor to get new list

Answers

Oyawebos

Howdy, Stranger!

Categories

DataTables

prevent Editor to get new list

prevent Editor to get new list

Answers

Oyawebos

Howdy, Stranger!

Quick Links

Categories

DataTables