0

I developed a system so my client can add entries to a mysql table via a php form. He wants to be able to sort (or rearrange) the order in which the entries are shown on the website at any given time. I can't make it show in any specific order, he has to able to customize it at will. I don't know how to do this in a way that is user friendly. The solutions I found are based on category (i.e: order alphabetically, order by id number,etc), that won't work, I need it to be 100% customizable, if he wants to move just one item he needs to be able to. Any ideas would be greatly appreciated.

Thanks!

JackPirate
  • 33
  • 5
  • here's a [hint](https://jqueryui.com/sortable/) – roullie Feb 23 '16 at 03:49
  • 1
    Possible duplicate of [How to sort rows of HTML table that are called from MySQL](http://stackoverflow.com/questions/3489783/how-to-sort-rows-of-html-table-that-are-called-from-mysql) – Mark Miller Feb 23 '16 at 03:51
  • @roullie that is actually very neat, but wouldn't anyone be able to re-order items with that, including visitors? – JackPirate Feb 23 '16 at 17:34
  • @MarkM That is not what I need. I need something that allows individual changes, not based on category. I need the user to be able to move just one item to any position for example. – JackPirate Feb 23 '16 at 17:35

1 Answers1

0

You can use jquery ui or roll your own sorter to let the user drag and drop. The resulting order could be sent back to the server with ajax if you need to save it.

This solution will work in addition to the other search options you mentioned having, such as alphabetical sort.

live demo: https://plnkr.co/edit/8YIkN6idxc0d2cH4TbTf?p=preview

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@2.1.3" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.min.js"></script>
  <style>
    table,
    th,
    td {
      text-align: center;
    }
  </style>
</head>

<body>
  <h2>Drag and drop a row</h2>
  <table style="width: 500px;">
    <thead>

    </thead>
    <tbody>
      <tr>
        <td style="background-color: #41CCFA;">1</td>
      </tr>
      <tr>
        <td style="background-color: #FA6F41;">2</td>
      </tr>
      <tr>
        <td style="background-color: #3DFFA8;">3</td>
      </tr>
      <tr>
        <td style="background-color: #70FA41;">4</td>
      </tr>
      <tr>
        <td style="background-color: #FA4441;">5</td>
      </tr>
    </tbody>
  </table>

  <script>
    var help = function(e, tr) {
        var trch = tr.children();
        var trcl = tr.clone();
        trcl.children().each(function(i) {
          $(this).width(trch.eq(i).width());
        });
        return trcl;
      },
      updateI = function(e, ui) {
        $('tr td:first-child', ui.item.parent()).each(function(i) {
          $(this).html(i + 1);
        });
      };

    $("tbody").sortable({
      helper: help,
      stop: updateI
    }).disableSelection();
  </script>
</body>

</html>

New Note: I noticed in the comments you mention not wanting to allow general users to use this functionality. You can add a check around the code like

if (user.authenticated) {
    ... code to make rows draggable
}

You would switch user.authenticated with whatever you use in your code to know the user is allowed to use the drag and drop.

No matter what solution you end up using, check the authentication of the user again on the server before saving any row order changes.

curtwphillips
  • 5,441
  • 1
  • 20
  • 19