Question

我需要帮助。

我正在使用yajra / laravel-datatables将include数据包添加到我的项目中。

一切正常。

现在我想使用行重新排序扩展名：https://datatables.net/extensions/rowreorder/

但是，当我拖延一行似乎有效，但是无法正常工作。

我认为有可能重新加载，因为我使用ajax url来加载数据，取消我的重新排序。有可能吗？

嗯，这些是我的代码：

控制器：

/**
 * Display a listing of the resource.
 *
 * @return \Illuminate\Http\Response
 */
public function index()
{
    $med = new Medicinas;

    return view('admin.medicinas.index', ['med' => $med->get()]);
}

/**
 * Process datatables ajax request.
 *
 * @return \Illuminate\Http\JsonResponse
 */
public function anyData()
{
    return Datatables::of(User::select('*'))->make(true);
}

路线：

Route::get('administrator/medicinas', [
        'as' => 'admin.medicinas',
        'uses' => 'MedicinasController@index'
    ]);

Route::controller('administrator/medicinas', 'MedicinasController', [
        'anyData'  => 'datatables.data',
        'index' => 'administrator/medicinas',
    ]);

查看：

@extends('app')

@section('content')
<div class="col-xs-12 col-sm-10">
    @foreach($med as $medicina)
        <div class="col-xs-12 col-sm-4">
            <a href="{{ route('medicina.edit', $medicina->id) }}" title="">{{ $medicina->nombre_comercial }}</a>
        </div>
    @endforeach
</div>

<table id="users-table" class="table table-striped table-bordered" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Email</th>
            <th>Created At</th>
            <th>Updated At</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Email</th>
            <th>Created At</th>
            <th>Updated At</th>
        </tr>
    </tfoot>
</table>
<input type="text" name="" value="" placeholder="">
@endsection

@section('scripts')
<script type="text/javascript">
    $(function() {
        var table_id = '#' + 'users-table';

        window.table = $(table_id).DataTable({
            rowReorder: true,
            processing: true,
            serverSide: true,
            ajax: '{!! route('datatables.data') !!}',
            columns: [
                { data: 'id', name: 'id' },
                { data: 'name', name: 'name' },
                { data: 'email', name: 'email' },
                { data: 'created_at', name: 'created_at' },
                { data: 'updated_at', name: 'updated_at' }
            ]
        });

        window.table_h = $(table_id + ' thead th');
        window.table_f = $(table_id + ' tfoot th');
    });
</script>
@endsection

Answer 1

您需要做的是将序列注入数据。

<script type="text/javascript">
    $(function() {
        var table_id = '#' + 'users-table';

        window.table = $(table_id).DataTable({
            rowReorder: true,
            processing: true,
            serverSide: true,
            ajax: {
                url:'{!! route('datatables.data') !!}',
                dataSrc: function ( d ) {
                    for ( var i=0, ien=d.data.length ; i<ien ; i++ ) {
                        d.data[i].seq = i;
                    }
                    return d.data;
                }
            },
            columns: [
                { data: 'id', name: 'id' },
                { data: 'name', name: 'name' },
                { data: 'email', name: 'email' },
                { data: 'created_at', name: 'created_at' },
                { data: 'updated_at', name: 'updated_at' }
            ]
        });

        window.table_h = $(table_id + ' thead th');
        window.table_f = $(table_id + ' tfoot th');
    });
</script>

Answer 2

这是我的布局：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Medicinas de amoooor</title>
{!! Html::style('assets/css/bootstrap.css') !!}
{!! Html::style('assets/css/bootstrap-switch.css') !!}
{!! Html::style('assets/css/bootstrap-tagsinput.css') !!}
{!! Html::style('assets/css/rowReorder.bootstrap.min.css') !!}
{!! Html::style('assets/css/style.css') !!}
<!-- Datatables -->
<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Arimo:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
{!! Html::style('assets/css/font-awesome.min.css') !!}

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
@include('header')
<!-- Contents -->
@if (Auth::guest())
    <div class="row">
        <div class="container">
            @yield('content')
        </div>
    </div>
@else
    <div class="row">
        <div class="container">
            @include('admin.sidebar')
            @yield('content')
        </div>
    </div>
@endif
@if (Session::has('errors'))
    <div class="container">
        <div class="alert alert-danger" role="alert">
        <ul>
            <strong>Oops! Something went wrong : </strong>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
            </ul>
        </div>
    </div>
@endif

<!-- Footer -->
@include('footer')

<!-- Modal -->
@yield('modal')

<!-- Scripts -->
{!! Html::script('assets/js/jquery-2.1.4.min.js') !!}
{!! Html::script('assets/js/jquery.dataTables.min.js') !!}
{!! Html::script('assets/js/dataTables.jqueryui.min.js') !!}
{!! Html::script('assets/js/dataTables.bootstrap.min.js') !!}
{!! Html::script('assets/js/bootstrap.min.js') !!}
{!! Html::script('assets/js/bootstrap-switch.js') !!}
{!! Html::script('assets/js/bootstrap-tagsinput.js') !!}
{!! Html::script('assets/js/dataTables.rowReorder.min.js') !!}
<!-- DataTables -->
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
@yield('scripts')
<script type="text/javascript">
    $(function() {
        if (typeof table_h !== 'undefined') {
            // Setup - add a text input to each header cell
            table_h.each( function () {
                var title = $(this).text();
                $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
            } );
        }

        if (typeof table_f !== 'undefined') {
            // Setup - add a text input to each header cell
            table_f.each( function () {
                var title = $(this).text();
                $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
            } );
        }

        // Apply the search
        table.columns().every( function () {
            var that = this;

            if (typeof table_h !== 'undefined') {
                $( 'input', this.header() ).on( 'keyup change', function () {
                    if ( that.search() !== this.value ) {
                        that
                            .search( this.value )
                            .draw();
                    }
                });
            }

            if (typeof table_f !== 'undefined') {
                $( 'input', this.footer() ).on( 'keyup change', function () {
                    if ( that.search() !== this.value ) {
                        that
                            .search( this.value )
                            .draw();
                    }
                });
            }
        });
    });
</script>

Laravel 5.1数据表重新排序行

2 个答案: