Crud with php ajax

1

I have a table that I want to customize and leave it a full crud, with delete, insert, update and delete multiple records, 1- I wanted to see if I could leave this table compatible with jquery 2.2.0 or a more advanced jquery because it only accept the 1.8.1, I was able to insert the php with while in the td, but the search does not search in all the pages of the table, only search the page where the records are the sample, ie, I have to do next to search on another page!

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script><scriptsrc="jquery.tablesorter.min.js"></script>
    <script src="jquery.tablesorter.pager.js"></script>
        <link rel="stylesheet" href="custom.css" media="screen" />



    <form method="post" action="../melhorando-exibicao-tabelas-jquery/exemplo.html" id="frm-filtro">
  <p>
    <label for="pesquisar">Pesquisar</label>
    <input type="text" id="pesquisar" name="pesquisar" size="30" />
  </p>
</form>

<table cellspacing="0" summary="Tabela de dados fictícios">
  <thead>
    <tr>
      <th><input type="checkbox" value="1" id="marcar-todos" name="marcar-todos" /></th>
      <th>ID</th>
      <th>Nome</th>
    </tr>
  </thead>
  <tbody>
  <?php
    require_once 'dbconfig.php';
    $conn = Conexao::getInstance();
    $stmt = $conn->prepare("SELECT * FROM tb_cidades ORDER BY id DESC");
    $stmt->execute();
    while($row=$stmt->fetch(PDO::FETCH_ASSOC))
    {
        ?>
    <tr>
      <td><input type="checkbox" value="1" name="marcar[]" /></td>
                <td><?= $row['id']; ?></td>
      <td><?= $row['nome']; ?></td>

    </tr>
    <?php
    }
    ?> 
  </tbody>
</table>

<div id="pager" class="pager">
    <form>
            <span>
                Exibir <select class="pagesize">
                        <option selected="selected"  value="10">10</option>
                        <option value="20">20</option>
                        <option value="30">30</option>
                        <option  value="40">40</option>
                </select> registros
            </span>

            <img src="first.png" class="first"/>
        <img src="prev.png" class="prev"/>
        <input type="text" class="pagedisplay"/>
        <img src="next.png" class="next"/>
        <img src="last.png" class="last"/>
    </form>
</div>

<script>
$(function(){

  $('table > tbody > tr:odd').addClass('odd');

  $('table > tbody > tr').hover(function(){
    $(this).toggleClass('hover');
  });

  $('#marcar-todos').click(function(){
    $('table > tbody > tr > td > :checkbox')
      .attr('checked', $(this).is(':checked'))
      .trigger('change');
  });

  $('table > tbody > tr > td > :checkbox').bind('click change', function(){
    var tr = $(this).parent().parent();
    if($(this).is(':checked')) $(tr).addClass('selected');
    else $(tr).removeClass('selected');
  });

  $('form').submit(function(e){ e.preventDefault(); });

  $('#pesquisar').keydown(function(){
    var encontrou = false;
    var termo = $(this).val().toLowerCase();
    $('table > tbody > tr').each(function(){
      $(this).find('td').each(function(){
        if($(this).text().toLowerCase().indexOf(termo) > -1) encontrou = true;
      });
      if(!encontrou) $(this).hide();
      else $(this).show();
      encontrou = false;
    });
  });

  $("table") 
    .tablesorter({
      dateFormat: 'uk',
      headers: {
        0: {
          sorter: false
        },
        5: {
          sorter: false
        }
      }
    }) 
    .tablesorterPager({container: $("#pager")})
    .bind('sortEnd', function(){
      $('table > tbody > tr').removeClass('odd');
      $('table > tbody > tr:odd').addClass('odd');
    });

});
</script>

jquery.tablesorter.pager.js

(function($) {
    $.extend({
        tablesorterPager: new function() {

            function updatePageDisplay(c) {
                var s = $(c.cssPageDisplay,c.container).val((c.page+1) + c.seperator + c.totalPages);   
            }

            function setPageSize(table,size) {
                var c = table.config;
                c.size = size;
                c.totalPages = Math.ceil(c.totalRows / c.size);
                c.pagerPositionSet = false;
                moveToPage(table);
                fixPosition(table);
            }

            function fixPosition(table) {
                var c = table.config;
                if(!c.pagerPositionSet && c.positionFixed) {
                    var c = table.config, o = $(table);
                    if(o.offset) {
                        c.container.css({
                            top: o.offset().top + o.height() + 'px',
                            position: 'absolute'
                        });
                    }
                    c.pagerPositionSet = true;
                }
            }

            function moveToFirstPage(table) {
                var c = table.config;
                c.page = 0;
                moveToPage(table);
            }

            function moveToLastPage(table) {
                var c = table.config;
                c.page = (c.totalPages-1);
                moveToPage(table);
            }

            function moveToNextPage(table) {
                var c = table.config;
                c.page++;
                if(c.page >= (c.totalPages-1)) {
                    c.page = (c.totalPages-1);
                }
                moveToPage(table);
            }

            function moveToPrevPage(table) {
                var c = table.config;
                c.page--;
                if(c.page <= 0) {
                    c.page = 0;
                }
                moveToPage(table);
            }


            function moveToPage(table) {
                var c = table.config;
                if(c.page < 0 || c.page > (c.totalPages-1)) {
                    c.page = 0;
                }

                renderTable(table,c.rowsCopy);
            }

            function renderTable(table,rows) {

                var c = table.config;
                var l = rows.length;
                var s = (c.page * c.size);
                var e = (s + c.size);
                if(e > rows.length ) {
                    e = rows.length;
                }


                var tableBody = $(table.tBodies[0]);

                // clear the table body

                $.tablesorter.clearTableBody(table);

                for(var i = s; i < e; i++) {

                    //tableBody.append(rows[i]);

                    var o = rows[i];
                    var l = o.length;
                    for(var j=0; j < l; j++) {

                        tableBody[0].appendChild(o[j]);

                    }
                }

                fixPosition(table,tableBody);

                $(table).trigger("applyWidgets");

                if( c.page >= c.totalPages ) {
                    moveToLastPage(table);
                }

                updatePageDisplay(c);
            }

            this.appender = function(table,rows) {

                var c = table.config;

                c.rowsCopy = rows;
                c.totalRows = rows.length;
                c.totalPages = Math.ceil(c.totalRows / c.size);

                renderTable(table,rows);
            };

            this.defaults = {
                size: 10,
                offset: 0,
                page: 0,
                totalRows: 0,
                totalPages: 0,
                container: null,
                cssNext: '.next',
                cssPrev: '.prev',
                cssFirst: '.first',
                cssLast: '.last',
                cssPageDisplay: '.pagedisplay',
                cssPageSize: '.pagesize',
                seperator: "/",
                positionFixed: true,
                appender: this.appender
            };

            this.construct = function(settings) {

                return this.each(function() {   

                    config = $.extend(this.config, $.tablesorterPager.defaults, settings);

                    var table = this, pager = config.container;

                    $(this).trigger("appendCache");

                    config.size = parseInt($(".pagesize",pager).val());

                    $(config.cssFirst,pager).click(function() {
                        moveToFirstPage(table);
                        return false;
                    });
                    $(config.cssNext,pager).click(function() {
                        moveToNextPage(table);
                        return false;
                    });
                    $(config.cssPrev,pager).click(function() {
                        moveToPrevPage(table);
                        return false;
                    });
                    $(config.cssLast,pager).click(function() {
                        moveToLastPage(table);
                        return false;
                    });
                    $(config.cssPageSize,pager).change(function() {
                        setPageSize(table,parseInt($(this).val()));
                        return false;
                    });
                });
            };

        }
    });
    // extend plugin scope
    $.fn.extend({
        tablesorterPager: $.tablesorterPager.construct
    });

})(jQuery);             

Does anyone have an idea how to do it?

    
asked by anonymous 06.12.2016 / 18:15

1 answer

0
  

just search the page where the records are the sample, ie, I   I have to next to search the other page!

That's so pricey, because the search is only in FrontEnd. You have to do this search on backend .

For this, you should use a plugin that accepts filter with ajax, see:

link

    
07.12.2016 / 13:37