Answers

• kthorngren Posts: 21,344Questions: 26Answers: 4,954

  April 2

  I'm not able to login into your site. If RowReorder is not working then is sounds like the table ordering is not correct. The table needs. to be ordered by the column used as the rowReorder.dataSrc which by default is the first column. See the second paragraph in the RowReorder docs for more details.

  Are you trying to save the reordering to the database, ie have rowReorder.editor configured?

  You can post your Javascript code. If using rowReorder.editor then the Laravel controller code will need debugging. I don't believe Datatables provides Laravel code and its support should come from the developer of the code.

  Kevin
• rmeetin Posts: 100Questions: 24Answers: 1

  April 4 edited April 4

  Allan has an account; it's probably easier for him to take a look than you, that is, if he can find a break in the storm. That being said. The columns are good and the reorder column is the last. I have other purpose forms using the same model/method that work.

  Here is what I have:

  The relevant part of the articles table:

  MariaDB [cms7_smo]> desc articles;

  +--------------------------+------------------+------+-----+---------+----------------+
  | Field                    | Type             | Null | Key | Default | Extra          |
  +--------------------------+------------------+------+-----+---------+----------------+
  | id                       | int(11)          | NO   | PRI | NULL    | auto_increment |
  | roworder                 | int(11)          | YES  |     | NULL    |                |
  

  The entries:

  ariaDB [cms7_smo]> select id, rowOrder, title from articles where page_type='story';
  +-----+----------+-----------------------------------------------------------+
  | id  | rowOrder | title                                                     |
  +-----+----------+-----------------------------------------------------------+
  |  28 |       34 | a story                                                   |
  |  79 |       76 | Quiet Life                                                |
  | 131 |       10 | Dogs are loud                                             |
  | 132 |        9 | Cats are furry and lovable                                |
  | 133 |        8 | Aren't Rhinos cool?                                       |
  | 134 |        7 | Are you a monkey?                                         |
  | 135 |        6 | Try reOrdering this story to the bottom, it bounces back. |
  +-----+----------+-----------------------------------------------------------+
  7 rows in set (0.001 sec)
  

  The laravel controller file section which handles the sorting:

   // ROWORDER BLOCK
    ->on('preCreate', function ($editor, $values) {
      if (!$values['articles']['rowOrder']) {
        $next = $editor->db()->sql('select IFNULL(MAX(rowOrder)+1, 1) as next FROM articles')->fetch();
        $editor->field('articles.rowOrder')->setValue($next['next']);
      } else {
        $editor->db()
      ->query('update', 'articles')
      ->set('rowOrder', 'rowOrder+1', false)
      ->where('rowOrder', $values['articles']['rowOrder'], '>=')
      ->exec();
      }
    })
    ->on('preRemove', function ($editor, $id, $values) {
      $order = $editor->db()
      ->select('articles', 'rowOrder', array('id' => $id))
      ->fetch();
  
      $editor->db()
      ->query('update', 'articles')
      ->set('rowOrder', 'rowOrder-1', false)
      ->where('rowOrder', $order['rowOrder'], '>')
      ->exec();
    })
    // END ROWORDER BLOCK
  

  The HTML showing # columns:

      <table id="stories" class="table table-striped table-bordered" style="width:100%">
        <thead>
          <tr>
            <th>ID</th>
            <th>Edit</th>
            <th class='select-filter'>Publish</th>
            <th>Files</th>
            <th>Title</th>
            <th>Edit content</th>
            <th>Category</th>
            <th>Created</th>
            <th>Modified</th>
            <th>Sort</th>
          </tr>
        </thead>
      </table>
  

  And finally the relevant JavaScript:

     ajax: { url: "stories", type: "POST", },
  
      select: { style: "os", selector: "td:nth-child(1), td:nth-child(4)" },
      rowReorder: { dataSrc: 'articles.rowOrder', editor: editor, selector: 'td:last-child' },
      order: [ [9, "asc"] ],
  
      columns: [
  
        { data: "articles.id" }, 
        { data: null, className: "dt-center editor-edit no-inline row-selector", defaultContent: '<i class="fa fa-edit"/>', orderable: false, searchable: false, },
        { data: "articles.publish" },
        {
          data: null,
          render: function(data, type, row) {
            return '<button class="btn file-upl mr-1" type="image" title="' + data.articles.title + ', ID#' + data.articles.id + '" row_id="' + data.articles.id + '"><span class="fa fa-image fa-uploader"></span></button>'
          },
          className: "no-inline", orderable: false, searchable: false
        },
        { data: "articles.title" },
        { data: "articles.fulltext", className: 'bubble-edit' },
        { data: "article_categories.name", editField: 'articles.catid' },
        { data: "articles.created" },
        { data: "articles.modified" },
        { name: "articles.rowOrder", data: "articles.rowOrder", className: "reorder no-inline", },
  
      ],
  
      columnDefs: [
      ]
  
    } );
  
    cms.createDTEButtons(table, editor);
    cms.inlineEdit("stories", editor, table);
    cms.generateMetaData(editor);
  
    editor
  
    .on("postCreate postRemove", function() { table.ajax.reload(null, false); })
    .on("initCreate", function() { editor.field("articles.rowOrder").enable(); })
    .on("initEdit", function() { editor.field("articles.rowOrder").disable(); });
  

  Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide
• rmeetin Posts: 100Questions: 24Answers: 1

  April 4 edited April 4

  Sorry the editor broke up some of the code that was pasted, separating it into two sections.
• kthorngren Posts: 21,344Questions: 26Answers: 4,954

  April 4

  Sorry the editor broke up some of the code that was pasted, separating it into two sections.

  Thats because you didn't use the Markdown code formatting with triple back ticks (```) around the code blocks.

  I'm not familiar with your Laravel code. Since editor: editor is defined the server code needs to update the DB correctly and provide the updated rows back to the client. The client side Editor will send the updated articles.rowOrder values to the server to update the DB. The server will return the updated rows. See the client/server data exchange docs for details.

  Maybe this will help you to troubleshoot while waiting for Allan. See this example. Open the browser's network inspector to view the XHR request and response. Reorder some rows and, if using Chrome, go to the Payload tab. This will show the modified information sent, for example:

  data[row_2][readingOrder]: 4
  data[row_3][readingOrder]: 2
  data[row_4][readingOrder]: 3
  action: edit
  

  Click the Preview tab to see the response, for example:

  [
    {
      "DT_RowId": "row_2",
      "title": "The Name of the Wind",
      "author": "Patrick Rothfuss",
      "duration": "983",
      "readingOrder": "4"
    },
    {
      "DT_RowId": "row_3",
      "title": "The Blade Itself: The First Law",
      "author": "Joe Abercrombie",
      "duration": "1340",
      "readingOrder": "2"
    },
    {
      "DT_RowId": "row_4",
      "title": "The Heroes",
      "author": "Joe Abercrombie",
      "duration": "1390",
      "readingOrder": "3"
    }
  ]
  

  Are you seeing the correct information sent to the server?

  Are you seeing the articles.rowOrder values updated correctly in the response?

  Kevin