A paginação

[Frank K Hosaka 0]

 Ontem de madrugada encontrei essa dica javascript - How do I get the value of the selected item in a datalist using pure JS? - Stack Overflow e com ele eu consegui terminar o meu código de paginação. O Laravel já tem um código pronto para ser usado, mas ele é funcional para uma tabela com 150 itens, o meu tem mais de 1500 itens, isso iria entupir a apresentação com um monte de guias. O meu só tem duas guias, o próximo e o anterior. E só lista 10 itens de cada vez.

 

O mais bacana dessa madrugada é que eu aprendi a usar um pouco mais a  função console.log( ) do JavaScript, procurei exaustivamente uma maneira de obter o número do item da option do datalist, mas foi em vão. A dica que eu encontrei na internet é muito engenhosa, o rapaz encontrou no JavaScript uma função que procura um atributo da option que foi selecionada. Como o option não tem a opção de index, ele sugere criar uma.

No Controller eu havia pedido para o Laravel trabalhar com os produtos em ordem alfabética, ou seja, a própria consulta já é um index. O único problema foi encontrar um jeito de colocar o index da consulta no option do datalist.

Com quase tudo resolvido, o problema é fazer o loop do JavaScript funcionar. Graças ao fórum iMasters ou Script Brasil eu consegui uma ajuda. Eu recebi a sugestão de garantir que uma das variáveis dentro do loop do JavaScript seja do tipo inteiro. Eu achei a sugestão um absurdo, mas depois eu lembrei que o mundo dos computadores é bem diferente das abstrações que a gente inventou como os números inteiros e os números reais.

 

Finalmente, aqui está o código. Ele foi escrito em Blade PHP, não é muito diferente do PHP: a diferença é que ele usa @ ao invés do tradicional <?php >. Nesse projeto pretendo trabalhar com o Bootstrap. Já o class="w600" não é Bootstrap, e sim uma gambiarra que eu fiz onde .w600 {width=600px}. Na imagem que eu deixei, dá para ver que eu ajuntei o nome do produto junto com o código dele, a minha ideia é para o usuário procurar o produto tanto pelo nome bem como pelo código. O datalist é muito bacana, pena que não dá para alterar a fonte e nem fazer a busca semelhante, ou seja, se você digitar "limão", ele não lista se foi cadastrado "limao".

 

@include('menu')
<script>
var icontrole
document.title='Produto';btmenu.innerHTML='Procurar produto por nome'
function controle(comando){
    if(comando=="proximo"){
        if(icontrole<produtos.options.length){icontrole+=10;show(icontrole)}}
    if(comando=="anterior"){
        if(icontrole>9){icontrole-=10;show(icontrole)}}}
function lista(input){
    option=Array.prototype.find.call(produto.list.options,function(option){
        return option.value === input})
    show(option.getAttribute("id"))}
function show(j){
    j=parseInt(j)
    divshow.innerHTML=""
    for(i=j;i<=j+9;i++){
    divshow.innerHTML+=produtos.options[i].value+"<br>"}
    produto.value=""
    icontrole=j}
</script>
<div class="w600 m-auto">
<input list=produtos autofocus id=produto onchange=lista(value)>
<datalist id=produtos>
@foreach($prod as $key=> $pr)
<option id={{$key}}>{{$pr->prod}} [{{$pr->codprod}}]
@endforeach
</datalist></div>
<div class="w600 m-auto" id=divshow></div>
@if(empty($show))
<script>show(0)</script>
@php $show="já começou" @endphp
@endif
<div class="w600 m-auto">
<input type=submit value=Anterior onclick="controle('anterior')">
<input type=submit value=Próximo onclick="controle('proximo')">
</div>