How can I join these two functions in javascript to page

0

I have two functions the one above is what paginates a table, it works correctly and the one below is the same.

but the function below is a search in the tables by words or numbers.

The problem that they work on their side each is that when I delete what is in search the page function loses its effect.

someone can give me an idea of where to start.

//creamos una funcion que se llamara Pager que recibira el nombre de la tabla,
//y la cantidad de registros seran presentados por paginador 
//y finalmente que contendra 7 variables

function Pager(tableName, itemsPerPage) {
    this.tableName = tableName; // se asigna el nombre de la tabla al objeto
    this.itemsPerPage = itemsPerPage; // se asigna el numero de registros
    this.currentPage = 1; //indicamos cual es la pagina que presentaremos inicialmente
    this.pages = 0;//aun no sabemos cuantas paginas seran, por tanto lo declaramos a 0
    this.inited = false;//idicamos si ya inicio la tabla o no
    this.divisores = 0;//aun no sabemos la cantidad de divisores por eso la declaramos a cero
    this.cantidadDivs=5;//cantidad de divisores a mostrar por paginador

/**la variable divisores y cantidadDivs, son referencia a que mostraremos paginadores de 5 en 5, 
por ejemplo si tenemos 120 registros y los mostraremos de 10 en 10, con la variable divisores indicamos que mostraremos 5 divisores, 
es decir, mostraremos el paginador 1(registros 1-10), paginador 2(registros 11,20).. asi hasta el paginador 5(registros 41-50), 
y cuando le demos siguiente, se mostraran los paginadores 6 al 10 ( registros 51-100, 
separados en su respectivo paginador )*/

//Dentro de nuestra funcion crearemos una sub-funcion llamada init


this.init = function() {
    var rows = document.getElementById(tableName).rows;
    var records = (rows.length - 1); 
    this.pages = Math.ceil(records / itemsPerPage);

    this.divisores = Math.ceil( this.pages / this.cantidadDivs );     

    this.inited = true;
}
/**
obtenemos la cantidad de registos que contiene la tabla.

obtenemos la cantidad de registos, recordemos que las numeraciones empiesan en 0, para el caso de la variable rows.

obtenemos el numero de paginas que mostraremos.

obtenemos el numero de divisores que tendremos 
( recordemos que es como un agrupador para los paginadores )

colocamnos la variable inicializado como cierto
*/

//Creamos nuestra funcion para poder mostrar los registros

this.showRecords = function(from, to) {        
    var rows = document.getElementById(tableName).rows;
    for (var i = 1; i < rows.length; i++) {
     if (i < from || i > to)  
        rows[i].style.display = 'none';
     else
        rows[i].style.display = '';
    }
}
/**
El metodo recibe el rango de registros, y lo unico que hace es colocar 
o borrar el estilo, en su apartado display a "none"
*/

//Creamos nuestra funcion para poder mostrar los divisores


this.showDivs = function(pageNumber){  
    var divisorMostrar = Math.ceil(pageNumber / this.cantidadDivs);     
    for( var i = 1 ; i <= this.divisores ; i++ ){
     if( divisorMostrar == i ){
       document.getElementById('dv'+i).style.display = '';
     }else{
       document.getElementById('dv'+i).style.display = 'none';
        }
    }    
}
/**
obtenemos el id del agrupador de divisores, 
e igual agregamos o borramos el estilo display

por ahora no se preocupen por los ids, esos los veremos mas adelante
*/
//Creamos nuestra funcion para poder mostrar un paginador

this.showPage = function(pageNumber) {
    if (! this.inited) {
     alert("La tabla no se inicializo");
     return;
    }

    this.showDivs(pageNumber);

    this.currentPage = pageNumber;

    var from = (pageNumber - 1) * itemsPerPage + 1;
    var to = from + itemsPerPage - 1;
    this.showRecords(from, to);
}   
/**
este metodo recibe su el id del paginador a mostrar
pero primero valida que la tabla este inicializada, para no mandar un error javascript

invocamos el metodo que mostrara los divs, y calculamos los registros que se han de mostrar
*/

//Creamos los metodos que invocaran nuestros botones

    this.prev = function() {
       if (this.currentPage > 1)
          this.showPage(this.currentPage - 1);
    }

    this.first = function() {
        if (this.currentPage > 1)
            this.showPage( 1 );
    }

    this.next = function() {
        if (this.currentPage < this.pages) {
            this.showPage(this.currentPage + 1);
        }
    }    

    this.last = function() {
        if (this.currentPage < this.pages) {
            this.showPage(this.pages);
        }
    }

/**
Son los metodos de los botones primero, anterior, siguiente, ultimo
*/   

//Creamos el metodo principal que asignara ids a divisores a paginadores, 

this.showPageNav = function(pagerName, positionId) {
     if (! this.inited) {
      alert("La tabla no esta inicializada");
      return;
     }
     var element = document.getElementById(positionId);

     var pagerHtml = '<span onclick="' + pagerName + '.first();">  inicio </span>  ';
     pagerHtml += '<span onclick="' + pagerName + '.prev();">  anterior </span>  ';

     var divisor = 1;
     var idDivisor = 1;
     for (var page = 1; page <= this.pages; page++) {
      if( idDivisor==1 ){
       pagerHtml += '<div id="dv'+divisor+'">';
      }  
      idDivisor = idDivisor+1;
         pagerHtml += '<span id="pg' + page + '" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</span>';
         if(idDivisor==this.cantidadDivs+1){
          idDivisor=1;
          divisor=divisor+1
          pagerHtml += '</div>';
         }else if( page == this.pages ){
          pagerHtml += '';
         }
        }
        pagerHtml += '<span onclick="'+pagerName+'.next();"> siguiente </span>  ';            
        pagerHtml += '<span onclick="'+pagerName+'.last();"> fin </span>';

        element.innerHTML = pagerHtml;
    }



 }
/**
verificamos que la tabla este inicializada.

recorremos las paginas calculadas anteriormente asignandole ids, la funcion onclick

finalmente todo ese codigo lo asignamos a una variable que es la encargada de pintar el html en nuestra pagina
*/

function doSearch()
        {
            var tableReg = document.getElementById('tblResultados');
            var searchText = document.getElementById('searchTerm').value.toLowerCase();
            var cellsOfRow="";
            var found=false;
            var compareWith="";

            // Recorremos todas las filas con contenido de la tabla
            for (var i = 1; i < tableReg.rows.length; i++)
            {

                cellsOfRow = tableReg.rows[i].getElementsByTagName('td');

                found = false;
                // Recorremos todas las celdas
                for (var j = 0; j < cellsOfRow.length && !found; j++)
                {
                   console.log(compareWith);
                    compareWith = cellsOfRow[j].innerHTML.toLowerCase();
                    // Buscamos el texto en el contenido de la celda
                    if (searchText.length == 0 || (compareWith.indexOf(searchText) > -1))
                    {
                        found = true;
                    }
                }
                if(found)
                { 



                    tableReg.rows[i].style.display = '';




                } else {
                    // si no ha encontrado ninguna coincidencia, esconde la
                    // fila de la tabla

                    tableReg.rows[i].style.display = 'none';


            }

            if(searchText==""){
            div = document.getElementById('limpiar');
            div.style.display = 'none';
            location.href ="Cuerpo.html";
            }

          }


        }
    
asked by Alberto Julio Arce Escolar 07.02.2018 в 23:12
source

0 answers