Question

*请帮助我，我只是陷入数据表行重新排序扩展。数据表工作正常，重新排序工作正常，但我希望重新排序后页面重新加载不会丢失。我的表数据来自数据库。 *

这是我的代码 -

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Admin Page </title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/rowreorder/1.2.0/css/rowReorder.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/rowreorder/1.2.0/js/dataTables.rowReorder.min.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>

   <script type="text/javascript">
      $(document).ready(function() {
    $('#table_id').DataTable( {
        rowReorder: true,
        update: false
    } );  


    table.on( 'row-reorder', function ( e, diff, edit ) {
        var result = 'Reorder started on row: '+edit.triggerRow.data()[1]+'<br>';

        for ( var i=0, ien=diff.length ; i<ien ; i++ ) {
            var rowData = table.row( diff[i].node ).data();

            result += rowData[1]+' updated to be in position '+
                diff[i].newData+' (was '+diff[i].oldData+')<br>';
        }

        $('#result').html( 'Event result:<br>'+result );

    } );
} );
   </script>

</head>
<body>

<div class="container">
  <h2>Manage registered user</h2>

  <table class="table table-bordered" id="table_id">
    <thead>
      <tr>
        <th>ID</th>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
    <?php foreach ($news as $news_item): ?>
      <tr>
        <td><?php echo $news_item['id']; ?></td>
        <td><?php echo $news_item['fname']; ?></td>
        <td><?php echo $news_item['lname']; ?></td>
        <td><?php echo $news_item['email']; ?></td>
        <td>

                <a href="<?php echo site_url('admin_ctrl/admin_crud_edit_ctrl/'.$news_item['id']); ?>">Edit</a> | 
                <a href="<?php echo site_url('admin_ctrl/admin_crud_del_ctrl/'.$news_item['id']);?>" onClick="return confirm('Are you sure you want to delete?')">Delete</a> |
                <a href="<?php echo site_url('admin_ctrl/change_user_ctrl/'.$news_item['id']); ?>">Make Him Admin</a>
        </td>
      </tr>
      <?php endforeach; ?>
    </tbody>
  </table>
</div>

</body>
</html>

Answer 1

您可能需要将订单存储在数据库中，或者如果您希望按用户存储在会话/ cookie中。

您从官方示例中复制粘贴'row-reorder'功能，修改它以便在某处保存每个行的顺序。然后在初始化Datatable时使用这些值。

您需要的一切都应该在以下两个链接中：

https://www.datatables.net/extensions/rowreorder/examples/initialisation/defaults.html

https://datatables.net/extensions/rowreorder/examples/initialisation/events.html

我认为没有办法让这个过程自动化，但我经常发现Datatables有一些神奇的功能，所以我可能错了。

Answer 2

查看：-

$(document).ready(function(){
var qqq = $( "tbody" );
 qqq.sortable({     
     axis: "y",   
    update: function (event, ui) {      
        var data = qqq.sortable('serialize');       
        $.ajax({
            data: data,
            type: 'POST',
            url: 'save_order_fun',
            success: function(response) {
              #do what you want todo
            }
        });
    }
  });
});

控制器：-

function save_order_fun()
   {
      $this->admin_model->save_order_model();   
   }

型号：-

   function save_order_model()
   {
      $i = 0;
      $orderlist = $_POST['serialize'];
      foreach ($orderlist as $k) {
      
      $this->db->SET('position',$i);
      $this->db->WHERE('id',$k);
      $this->db->UPDATE('user');

      $i++;
      }
   }

我想在页面重新加载后保持相同的数据表行重新排序

2 个答案: