Laravel 5.1 datatables порядковый номер

Мне нужна помощь.Laravel 5.1 datatables порядковый номер

Я использую yajra/laravel-datatables для включения данных в мой проект.

Все работает.

Теперь я хочу использовать расширение строки переназначения: https://datatables.net/extensions/rowreorder/

Но когда я делаю перетаскивание с рядом, кажется, работает, но не работает.

Я думаю, что это возможно, что перезагружается, потому что я использую URL-адрес ajax для загрузки данных, что делает невозможным изменение порядка. Возможно?

Ну, это мои коды:

Контроллер:

/** 
* 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' => '[email protected]' 
    ]); 

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

источник

2016-01-07 SeiyaJapon

вы в том числе REORDER файлы? (js + css) –

Единственный код js, который я сделал, находится в конце представления. По документации я больше не читал ничего, кроме как написать «rowReorder: true». Если вам нужно больше, вы можете объяснить мне, пожалуйста? – SeiyaJapon

Что вам нужно сделать, это впрыснуть последовательность в данные.

<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>

источник

2016-01-07 18:40:30

Хорошо, я не понимаю вас в вашем предыдущем комментарии. В мой макет включен. В головку: {!! Html :: style ('assets/css/rowReorder.bootstrap.min.css') !!} В нижней части корпуса: {!! Html :: script ('assets/js/dataTables.rowReorder.min.js') !!} Но, не работает:/ – SeiyaJapon

Я обновляю ответ, вы не задали последовательность в опции ajax.dataSrc –

Извините , но ваше решение не работает для меня – SeiyaJapon

Это мой макет:

<!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>

источник

2016-01-07 18:46:40 SeiyaJapon

Laravel 5.1 datatables порядковый номер

ответ

Смежные вопросы