Can we create a shortcut method so that if I visit an editor page it will automatically open editor?

koniahin

Normally when you visit an editor page it displays a set of records, you click on a record, then click the Edit button to open the popup editor.

I have a page which will never have more than 1 row. I'd like to know if there is a way to make it automatically open the popup editor when you visit the page, reducing the step to select the row?

allan

Yes - Editor actually adds a row().edit() method to the DataTables API so you could do:

let table = new DataTable('#example');

table.row(0).edit();

It looks like that particular piece of documentation is missing though! It is written, it just looks like I haven't bundled it into the site. I'll get that sorted. You can pass a form-options object to it as a parameter for the .edit() part if you want to use that to set a form title, etc.

Allan

koniahin

I missed some perhaps vital information. The table has many records. This view uses a where clause to return only one record.

allan

That shouldn't make any difference. If the client-side only sees one row, then my code above will work. I should perhaps have put it inside initComplete, which would be needed if you are Ajax loading the data?

new DataTable('#example', {
  ajax: '...',
  initComplete: function () {
    let api = this.api();

    api.row(0).edit();
  }
});

Allan

koniahin

Where does this code go? The syntax does not match what we have here.

    jQuery(function() {

      editor = new $.fn.dataTable.Editor({

        table: "#myaccount",

        ajax: { url: "account", type: "POST", },

        formOptions: { main: { onComplete: "none", }, },

      form fields here ...

      });

      editor.dependent( 'users.country_code', '/bin/users/regions' );

      var table = $("#myaccount").DataTable({

          ajax: { url: "account", type: "POST", },

          responsive: true,
          stateSave: true,

          ...

allan

initComplete is a configuration option. Out it in the options to you pass to $('#myaccount').DataTable(...).

More generally these two are the same:

$('#myTable').DataTable({...});
// and
new DataTable('#myTable', {...});

They do exactly the same thing, just slightly different styles. I'm going to write more about it in the documentation soon

Allan