Laravel 5.1 datatables reorder row -
i need help.
i'm using yajra/laravel-datatables include datatables project.
all working.
now want use row reorder extension: https://datatables.net/extensions/rowreorder/
but when make drag , drop row seems work, not working.
i think possible reloaded because use ajax url load data, unmaking reorder do. possible?
well, these codes:
controller:
/** * display listing of 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); } routes:
route::get('administrator/medicinas', [ 'as' => 'admin.medicinas', 'uses' => 'medicinascontroller@index' ]); route::controller('administrator/medicinas', 'medicinascontroller', [ 'anydata' => 'datatables.data', 'index' => 'administrator/medicinas', ]); view:
@extends('app') @section('content') <div class="col-xs-12 col-sm-10"> @foreach($med $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
this layout:
<!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 , respond.js ie8 support of html5 elements , media queries --> <!-- warning: respond.js doesn't work if view 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! went wrong : </strong> @foreach ($errors->all() $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 text input 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 text input each header cell table_f.each( function () { var title = $(this).text(); $(this).html( '<input type="text" placeholder="search '+title+'" />' ); } ); } // apply search table.columns().every( function () { var = this; if (typeof table_h !== 'undefined') { $( 'input', this.header() ).on( 'keyup change', function () { if ( that.search() !== this.value ) { .search( this.value ) .draw(); } }); } if (typeof table_f !== 'undefined') { $( 'input', this.footer() ).on( 'keyup change', function () { if ( that.search() !== this.value ) { .search( this.value ) .draw(); } }); } }); }); </script>
Comments
Post a Comment