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

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

koniahinkoniahin Posts: 186Questions: 39Answers: 7

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?

Answers

  • allanallan Posts: 63,535Questions: 1Answers: 10,475 Site admin

    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

  • koniahinkoniahin Posts: 186Questions: 39Answers: 7

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

  • allanallan Posts: 63,535Questions: 1Answers: 10,475 Site admin
    edited October 2023

    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

  • koniahinkoniahin Posts: 186Questions: 39Answers: 7

    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,
    
              ...
    
  • allanallan Posts: 63,535Questions: 1Answers: 10,475 Site admin

    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

Sign In or Register to comment.