How to paginate a Javascript filter in Laravel 5.4?

Asked

Viewed 234 times

2

I created a search filter for a table, in it I have Description, Model, Status, among other 'inputs' to search. But after the search is done, the paging does not follow the result. Follow the code below:

Index:

@extends('admin/layouts/default')

{{-- Page title --}}
@section('title')
    Comércio Urbano - Produtos
    @parent
@stop

{{-- page level styles --}}
@section('header_styles')

    <link href="{{ asset('assets/css/bootstrap-select.css') }}" rel="stylesheet">


@stop

{{-- Conteúdo da página --}}
@section('content')

 <section class="content-header">
        <!--section starts-->
        <h2>Produtos</h2>
        <ul class="breadcrumb">
            <li>
                <a href="{{ route('admin.dashboard') }}">
                    <i class="livicon" data-name="home" data-size="14" data-loop="true"></i>
                    Início
                </a>
            </li>
            <li>
                <a href="#">Produtos</a>
            </li>
            <li class="active">Listagem de produtos</li>
        </ul>
     <div>
         <table class="table">
             <tr>
                 <th>
                    <label for="descriptionProd">Descrição</label>
                    <input class="form-control" type="text" name="descricao" id="descricao" value="{{ session('descricao') }}">
                 </th>
                 <th>
                     <label for="modelProd">SKU</label>
                     <input class="form-control" id="model" name="model" value="{{session('model')}}" >
                 </th>
                 <th>
                     <label for="statusProd">Status</label>
                     <select class="form-control" name="status" id="status">
                         <option value="" @if(session('status') === "") selected  @endif >Todos</option>
                         <option value="1" @if(session('status') === "1") selected @endif > Ativo </option>
                         <option value="0" @if(session('status') === "0") selected @endif >Inativo</option>
                     </select>
                 </th>
                 <th>
                     <label for="stockProd">Estoque</label>
                     <select class="form-control"  name="stock" id="stock">
                         <option value="" @if(session('stock') === "") selected  @endif >Todos</option>
                         <option value="1" @if(session('stock') === "1") selected @endif >Disponível </option>
                         <option value="0" @if(session('stock') === "0") selected @endif >Indisponível</option>
                     </select>
                 </th>
                 <th>
                     <label for="distributorProd"> Distribuidor </label>
                    <select class="form-control" name="distributor" id="distributor">
                     <option selected> Todos </option>
                     @foreach(App\Helpers\ProductDistributorHelper::$distributor as $key => $value)
                     <option value="{{$key}}">{{$value}}</option>
                     @endforeach
                    </select>
                 </th>
                 <th>
                     <label for="imagemProd">Imagem</label>
                     <select class="form-control" name="imagem" id="imagem">
                         <option>Todos</option>
                         <option> Sem Imagem</option>
                     </select>
                 </th>
                </tr>
         </table>
         <button class="btn btn-primary" id="clean-form-button" style="float:right; margin-bottom: 1%;" ><i class="glyphicon glyphicon-erase"></i> Limpar </button>
     </div>
     <!-- inclui a tabela dos produtos -->
     <div id="product-table">
         @include('admin.product-table')
     </div>

    </section>
@stop

{{-- page level scripts --}}
@section('footer_scripts')
    <script src="{{ asset('assets/js/ProductSearch.js') }}"></script>
    <script src="{{ asset('assets/js/bootstrap-select.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/vendors/dropzone/js/dropzone.js') }}" ></script>
    <script src="{{ asset('assets/js/ProductSearch.js') }}"></script>
    <script>
        var postSearch = '{{ route('product::searchPost') }}';
        var searchRequest = {
            'descricao':'{{session('descricao')}}',
            'model': '{{ session('model') }}',
            'distributor': '{{ session('distributor') }}',
            'status': '{{ session('status') }}',
            'stock' : '{{ session('stock') }}',
            'image' : '{{ session('image') }}',
            'categoria' :'{{session('categoria')}}',
        };
    </script>
    <script>
        $(window).load(function(){
            $('#cover').fadeOut(1000);
        })
    </script>

@stop

Productsearch.js

$(document).ready(function() {

    $(document).on('blur', '#model', function() {
        var model = $('#model').val();
        searchRequest['model'] = model;
        doSearch();
    });

    $(document).on('blur', '#descricao', function() {
        var descricao = $('#descricao').val();
        searchRequest['descricao'] = descricao;
        doSearch();
    });

    $(document).on('blur', '#status', function() {
        var status = $('#status').val();
        searchRequest['status'] = status;
        doSearch();
    });

    $(document).on('blur', '#distributor', function() {
        var distributor = $('#distributor').val();
        searchRequest['distributor'] = distributor;
        doSearch();
    });

    $(document).on('blur', '#stock', function() {
        var stock = $('#stock').val();
        searchRequest['stock'] = stock;
        doSearch();
    });

    $(document).on('blur', '#image', function() {
        var image = $('#image').val();
        searchRequest['image'] = image;
        doSearch();
    });

    $(document).on('blur', '#categoria', function(){
       var categoria = $('#categoria').val();
       searchRequest['categoria'] = categoria;
       doSearch();
    });

});

$(document).on('click', '#clean-form-button', function() {
    $('#descricao').val("");
    $('#model').val("");
    $('#distributor').val("");
    $('#status').val("");
    $('#stock').val("");
    $('#categoria').val("");
    searchRequest = {
        'descricao': '',
        'model': '',
        'distributor': '',
        'status': '',
        'stock': '',
        'image': '',
        'categoria':'',
    };
    doSearch();
});

function IsEmpty(str)
{
    if ( typeof str == 'undefined' || !str || str.length === 0 || str === "" || !/[^\s]/.test(str) || /^\s*$/.test(str) || str.replace(/\s/g, "") === "" )
    {
        return true;
    }
    else
    {
        return false;
    }
}

function doSearch() {
    $.post(postSearch, {
        'search_data': JSON.stringify(searchRequest),
        '_token': $('meta[name=csrf-token]').attr('content'),
    }
    , function(data) {
        $('#product-table').html(data);
    });
}


$("#model").html('<img src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/1f430a36197347.57135ca19bbf5.gif" alt="Wait" />');
$('#message').load('index.php?pg=ProductSearch', null, function() {
  $("#model").html('');
});
$body = $("body");

$(document).on({
    ajaxStart: function() { $body.addClass("loading");    },
     ajaxStop: function() { $body.removeClass("loading"); }
});

product-table.blade.php

<meta name="csrf-token" content="{{ csrf_token() }}" />
<table class="table table-striped table-bordered" id="tableProd" class="table table-bordered" style="margin-top: 3%;">
    <tr>
        <th><center>Imagem</center></th>
        <th>SKU</th>
        <th><center>Produto</center></th>
        <th>Custo</th>
        <th>Preço</th>
        <th>Atualização</th>
        <th>Status</th>
        <th>Estoque</th>
        <th>Distruibuidor</th>
        <th>Categoria</th>
        <th id="acoes">Ações</th>
    </tr>
    @foreach($product as $prod)
        <tr>
            <tbody>
            <td><img src="{{$prod->image->erp_image}}" style="width: 50px; height: 50px;" alt="" id="ProdImage"></td>
            <td>{{$prod->erp_model}}</td>
            <td>{{$prod->description->erp_name}}</td>
            <td>R$ {{$prod->erp_cost}}</td>
            <td>R$ {{$prod->erp_price}}</td>
            <td>{{ $prod->erp_modifieddate}}</td>
            <td style="max-width: 45px">
                @if($prod->erp_status == 1)
                    <span class="label label-success">Ativo</span>
                @else
                    <span class="label label-danger">Inativo</span>
                @endif
            </td>
            <td>{{ $prod->erp_quantity}}</td>
            <td>{{ App\Helpers\ProductDistributorHelper::$distributor[$prod->erp_distributor] }}</td>
            <td>
                @foreach($prod->category as $category)
                    {{$category->erp_name}}
                @endforeach
            </td>


                                    <script type="text/javascript">
                                        function form_submit() {
                                            document.getElementById("search_form").submit();
                                        }
                                    </script>

                                    <div class="modal-footer">
                                        <button type="submit" class="btn btn-default" onClick="window.location.reload()"> Salvar Alterações</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                </div>
                <style>
                    td{
                        max-width: 100px;
                        min-width: 80px;
                    }
                </style>
            </tbody>

        </tr>
    @endforeach
</table>
<center>{{$product->links()}}</center>

Controller

public function search(Request $request)
    {    $product = Product::query();
         $categories = Category::query();

//        $model = $request->model;
//        $status = $request->status;
//        $distributor = $request->distributor;

        if ($request->isMethod('post'))
        {
            $data = json_decode($request->search_data);
            $descricao;
            $model;
            $status;
            $distributor;
            $stock;
            $categoria;
            $image;

            $descricao = $data->descricao;
            $model = $data->model;
            $status = $data->status;
            $distributor = $data->distributor;
            $stock = $data->stock;
            $categoria = $data->categoria;
            $image = $data->image;

            session(['descricao' => $descricao]);
            session(['model' => $model]);
            session(['status' => $status]);
            session(['distributor' => $distributor]);
            session(['stock' => $stock]);
            session(['categoria' => $categoria]);
            session(['image' => $image]);

        }
        if (strlen(session('descricao')) > 0)
        {
            $product_ids = Description::where('erp_name', 'LIKE', '%' . session('descricao') . '%')->get();
            $ids = [];

            foreach ($product_ids as $product_data)
            {
                $ids[] = $product_data->erp_productid;
            }

            $product = $product->whereIn('erp_productid', $ids);
        }




        if (strlen(session('model')) > 0)
        {
            $product = $product->where('erp_model', 'LIKE', '%' . session('model') . '%');
        }

        if (strlen(session('status')) > 0)
        {
            $product = $product->where('erp_status', session('status'));
        }


        if (strlen(session('distributor')) > 0)
        {
            $product = $product->where('erp_distributor', session('distributor'));
        }
        if (strlen(session('stock')) > 0)
        {
            if (intval(session('stock')) == 1)
            {
                $product = $product->where('erp_quantity', '>', 0);
            } else
            {
                $product = $product->where('erp_quantity', '=', 0);
            }
        }

        if (strlen(session('categoria')) > 0)
        {
            $product_ids = DB::table('erp_product')
                ->join('erp_product_category', 'erp_product_category.erp_productid', '=', 'erp_product.erp_productid')
                ->select('erp_product.*')
                ->get();
            $ids = [];

            foreach ($product_ids as $product_data)
            {
                $ids[] = $product_data->erp_productid;
            }

            $product = $product->whereIn('erp_categoryid', $ids);
        }

        if (strlen(session('image')) > 0)
        {
            $URL_IMAGE = "http://comercio-urbano.s3-website-sa-east-1.amazonaws.com/produtos/marcas/nao_disponivel.jpg";

            if (intval(session('image')) == 0)
            {
                $product_ids = Image::where('erp_image', '=', $URL_IMAGE)->get();
                $ids = [];

                foreach ($product_ids as $product_data)
                {
                    $ids[] = $product_data->erp_productid;
                }

                $product = $product->whereIn('erp_productid', $ids);
            }
        }



        $content = $product->paginate(30);
        $cat = Category::all();

        if ($request->isMethod('post'))
        {
            return view('admin.product-table')->with('product', $content)->with('categories', $categories)->with('cat',$cat);
        } else
        {
            return redirect('admin/product')->with('product', $content)->with('categories', $categories)->with('cat',$cat);
        }
    }

Any suggestions?

  • You can make your Controller?

  • I posted @Virgilionovic

  • It does not generate paging correctly?

  • This link can help you https://answall.com/questions/170167/pagina%C3%A7%C3%A3o-ass%C3%Adncrona-com-Aravel

  • This is another example: https://gist.github.com/tobysteward/6163902

  • 1

    @Virgilionovic, I found my error, was in 'Return redirect' the correct was 'Return view'. Thanks!

Show 1 more comment
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.