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调用rowsorter

$("#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的roworter函数，我可以跟踪行的位置及其新位置：

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

Answer 1

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

e = root.xpath('//article[contains(text(), "stuff")]')
joined_string = "".join(e)//list to string conversion
print joined_string

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

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

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);
});

然而，这是很多工作，我想知道它是否真的值得。

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

1 个答案: