通过可拖动的表永久更改记录的顺序

Question

我有一个从数据库中填充数据的数据表，我使用Ajax调用来填充表上的数据，我使用jQuery RowSorter.js来拖动我的表行。我的数据中的我的查询按sortorder列排序。如果它是可拖动的，我如何将排序永久保存在表中并保存在数据库中。sortorder也应该根据用户在可拖动表行中选择的排序顺序进行更新。这是我的代码：

Ajax：

$.ajax({
    url: "api/question/all", 
    type: 'GET',
    success: function(result){
    var myObj = $.parseJSON(result);
        $.each(myObj, function(key,value) {
            var t = $('#QuestionList').DataTable();
            t.row.add( [
                value.id,
                value.columnheader,
                value.costperlead,
                // value.isenabled,
                "<label class='toggle'><input type='checkbox' checked='' id='"+value.columnheader+"'><span class='handle'></span></label>",
                value.sortorder,
                "<a class='btn btn-small btn-info' href='<?php echo URL::to('question').'/';?>"+value.id+"/edit'><span class='glyphicon glyphicon glyphicon-edit' aria-hidden='true'></span></a>",
                "<form method='POST' action='<?php echo URL::to('question').'/';?>"+value.id+"' accept-charset='UTF-8' class='pull-left' >"+
                "<input name='_method' type='hidden' value='DELETE'>"+
                "<button type='submit' class='btn btn-warning'><span class='glyphicon glyphicon-trash' aria-hidden='true'></span></button>"+"</form>",
            ] ).draw();
            if(value.isenabled == "Yes")
            {
                $("#"+value.columnheader).prop('checked', true);
            }
            else if(value.isenabled == "No")
            {
                $("#"+value.columnheader).prop('checked', false);
            }
        });
    }}).error(function(){
          progress.progressTimer('error', {
          errorText:'ERROR!',
          onFinish:function(){
            alert('There was an error processing your information!');
          }
        });
    }).done(function(){
        progress.progressTimer('complete');
        $( "#progressbar" ).fadeOut( "slow" );
    });

我的表格HTML

<table id="QuestionList" class="table table-striped table-bordered" cellspacing="0" width="100%">
  <thead>
     <tr>
       <th colspan="5"> <center>Question Information<center></th>
       <th colspan="2"> <center>Actions<center></th>
     </tr>
     <tr>
        <th>ID</th>
        <th>Column Header</th>
        <th>Cost Per Lead</th>
        <th>Is Enabled?</th>
        <th>Sort Order</th>
        <th>Edit/View</th>
        <th>Delete</th>
      </tr>
   </thead>
      <tbody>
       </tbody>
       <tfoot>
            <tr>
                <td colspan="7">&nbsp;</td>
            </tr>
        </tfoot>
 </table> 

JS调用行分拣机

$("#QuestionList").rowSorter({
    onDrop: function(tbody, row, index, oldIndex) {
        $(tbody).parent().find("tfoot > tr > td").html((oldIndex + 1) + ". row moved to " + (index + 1));
    }
});

我的查询

public function apiGetQuestions()
{
    $questions = Question::orderBy('id', 'DESC')->get();
    return json_encode($questions);
}

我正在使用Laravel 5，任何想法或指南都将不胜感激。谢谢

更新：

使用Jquery的行分类器功能，我可以跟踪行的位置及其新位置：

$(tbody).parent().find("tfoot > tr > td").html((oldIndex + 1) + ". row moved to " + (index + 1));

Answer 1

您不想存储整个表，但可以存储排序事件。每次用户单击列时，都会将其添加到排序序列数组中，并保存序列化的数组。

var sortSequence = [];
$('th').click(function() {
    // direction: 'asc' or 'desc'
    sortSequence[$(this).text()] = get_direction_from_jquery_sort_plugin_somehow();
    var data = {
        'table': ...,
        'sequence': sortSequence.serialize()
    };
    $.post('store-sequence', data);
});

然后，在存储排序时，我会进行一些清理，以删除任何重复或升序、降序、升序。

然后在检索数据时，将排序序列添加为orderBy（）调用。

$query = DB::table("my_table")->where(...);
$sorts = $this->fetchSorting(Auth::user(), "my_table");
foreach ($sorts as $column => $direction) {
    $query->orderBy($column, $direction);
}

然而，这是一项艰巨的工作，我想知道这是否真的值得。