нумерация страниц с использованием JavaScript и XML

Question

нумерация страниц с использованием JavaScript и XML

0

В настоящее время я разбираю xml файл и получаю содержимое для отображения в таблице из 5 столбцов и x количество строк в зависимости от количества элементов в XML файле. К сожалению, все появляется на странице, и мне нужно реализовать разбиение на страницы в моем javascript, чтобы обрабатывать сотни записей из XML файла. Я думал о 50 пунктах на страницу или 20 строк по 5 столбцов каждый. Ниже приведен код, который у меня есть:

Javascript:

function generateTables(){

    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();      
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }

    xmlhttp.open("GET","xml/test_102.xml",false);    
    xmlhttp.send();
    xmlDoc=xmlhttp.responseXML;

    var content = document.getElementById('content');
    var x=xmlDoc.getElementsByTagName("vids");
    var xmlContent = "<table class='table' id='videos' border='0'>";
    var rows = parseInt(x.length/5 + .6)
    var count = 0;
    var z = 0;
    //Pagination idea. We can get the x.length value which is the total tags that we have. We can divide that by 50 to get teh number of pages we have. Then we can simply simply each on a pge and we will knwo the # of pages in a variable.
    //rows
    for (i=0;i<rows;i++) {
        //This will handle if there is an uneven amount of columns.
        if ((count + 5) > x.length)
            {
            z = x.length - count
            }
        else 
            {
            (z = 5)
            }
        xmlContent += '<tr>'

        //columns
        for (y=0;y<z;y++) {
            var title = x[count].getElementsByTagName("title")[0].childNodes[0].nodeValue;
            var vidPath = x[count].getElementsByTagName("vidPath")[0].childNodes[0].nodeValue;
            var png = x[count].getElementsByTagName("pngPath")[0].childNodes[0].nodeValue;
            var gif = x[count].getElementsByTagName("gifPath")[0].childNodes[0].nodeValue;

            xmlContent += "<td align='center'>" + title;
            xmlContent += "<br /><a href='"+ vidPath;
            xmlContent+="'><img src='"+ png +"' width='50%'";
            xmlContent+= "onmouseover=\"this.src='"+gif+"'\" onmouseout=\"this.src='"+png+"'\"/></a></td>";         
            count++
            }
        xmlContent += '</tr>'
    }
    xmlContent += "</table>";
    //document.write(rows)  
    content.innerHTML = xmlContent;

}

Это html, который у меня есть до сих пор:

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My tables</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script src="js/records.js"></script>
</head>
<body>
    <div id="title">Page Title</div>
    <div id="content"></div>

<script type="text/javascript">
window.onload = function() {
   generateTables();
};
</script>
</body>
</html>

Сейчас это работает, так как оно отображает все записи в правильных строках/столбцах. Мне просто нужно реализовать пейджинг с тем, что у меня есть до сих пор. Есть идеи?

Chango Mango 01 окт. 2013, в 01:06

Источник

0

Вы не создаете правильный XMLHttpRequest , который должен использовать событие onreadystatechange чтобы затем проверить, if(xmlhttp.readyState == && xmlhttp.status == 200) . Кроме того, ваша переменная xmlhttp является глобальной.
StackSlave 30 сен. 2013, в 22:50

Теги:

javascript

html

html5

pagination

3 ответа

0

Используйте XMLHttpRequest для увеличения onreadystatechange после того, как пользователь нажмет кнопку, а затем сервер отправит onreadystatechange информацию.

PHPglue 30 сен. 2013, в 21:42

0

Выполните все строки, как сейчас, и используйте JavaScript (предлагая jQuery), чтобы скрыть все строки за пределы, которую вы хотели бы отобразить (например, 50).

Добавьте пейджер со следующей и предыдущей кнопками, например. A-Теги, подобные

<a href="#" id="pager_prev">Prev</a>
<a href="#" id="pager_next">Next</a>

Теперь сохраните текущее состояние пейджера и максимальное состояние пейджера в переменных

var pagerState = 0;
var maxPagerState = ceil(jQuery('table#videos').find('tr').length / 50);

Используйте код запуска, как этот

// On document ready
jQuery(function() 
{
    // Get all rows
    var rows = jQuery('table#videos').find('tr');

    // Hide all rows
    rows.hide();

    // Select the first fifty rows
    rows.slice(0, 50).show();
});

И привяжите события onClick к кнопкам пейджера

// On click event: prev
jQuery('#pager_prev').click(function() 
{
    if(pagerState > 0)
    {
        pagerState--;

        // Get all rows
        var rows = jQuery('table#videos').find('tr');

        // Hide all rows
        rows.hide();

        // Select the desired rows and show them
        rows.slice(pagerState * 50, (pagerState + 1) * 50).show();
    }

    return false;
});

// On click event: next
jQuery('#pager_next').click(function() 
{
    if(pagerState < maxPagerState)
    {
        pagerState++;

        // Get all rows
        var rows = jQuery('table#videos').find('tr');

        // Hide all rows
        rows.hide();

        // Select the desired rows and show them
        rows.slice(pagerState * 50, (pagerState + 1) * 50).show();
    }

    return false;
});

Я не тестировал его, но я думаю, что это хороший момент для начала.

Изменение: может возникнуть проблема при разрезании строк в следующей функции пейджера. Но сначала проверьте его.

0x25b3 30 сен. 2013, в 20:16

Ещё вопросы

Вы не создаете правильный XMLHttpRequest , который должен использовать событие onreadystatechange чтобы затем проверить, if(xmlhttp.readyState == && xmlhttp.status == 200) . Кроме того, ваша переменная xmlhttp является глобальной.

Chango Mango · Accepted Answer · 2013-10-01T15-31-00.000Z

Я нашел решение. Вот:

function generateTables(start){

    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();      
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }

    xmlhttp.open("GET","xml/test_102.xml",false);    
    xmlhttp.send();
    xmlDoc=xmlhttp.responseXML;

    var content = document.getElementById('content');
    var x=xmlDoc.getElementsByTagName("vids");
    var xmlContent = "<table class='table' id='videos' border='0'>";
    var columns =5;
    var count = 0;
    var z = 0;
    var rows = 10;

    //Pagination stuff
    var totalContent = x.length;//total number of content       
    var noPerPage = rows*columns;//Number of content in one page    
    var noOfPage = 0;//Holds number of pages

    if(totalContent%noPerPage == 0) {
        noOfPage = Math.floor(totalContent/noPerPage);
    }
    else {
        noOfPage = Math.floor((totalContent/noPerPage)+1);
    }

         //if total content is less than number of content in one page
    if(totalContent < noPerPage) {
        if(totalContent%columns == 0) {
            rows = Math.floor(totalContent/columns);
        }
        else {
            rows = Math.floor((totalContent/columns)+1);
        }
        noOfPage = 1;
    }

    //if total content is less than number of content in one page
    if(totalContent < noPerPage) {
        if(totalContent%columns == 0) {
            rows = Math.floor(totalContent/columns);
        }
        else {
            rows = Math.floor((totalContent/columns)+1);
        }
        noOfPage = 1;
    }

    var whichPage = (start/noPerPage)+1;//Current page number

    var pagination = 5;//To show page numbers, better to keep odd number like 3,5,7 etc
    var midPagination = Math.floor(pagination / 2);
    var html = ""
    for (i=0;i<rows;i++) {
        //This will handle if there is an uneven amount of columns.
        if ((start + 5) > x.length)
            {
            z = x.length - start
            }
        else 
            {
            (z = 5)
            }
        if(x[start]) {
        xmlContent += '<tr>'
        }       

        //columns
        for (y=0;y<z;y++) {
            var title = x[start].getElementsByTagName("title")[0].childNodes[0].nodeValue;
            var vidPath = x[start].getElementsByTagName("vidPath")[0].childNodes[0].nodeValue;
            var png = x[start].getElementsByTagName("pngPath")[0].childNodes[0].nodeValue;
            var gif = x[start].getElementsByTagName("gifPath")[0].childNodes[0].nodeValue;
            if(x[start]) {
                xmlContent += "<td align='center'>" + title;
                xmlContent += "<br /><a href='"+ vidPath;
                xmlContent+="'><img src='"+ png +"' width='50%'";
                xmlContent+= "onmouseover=\"this.src='"+gif+"'\" onmouseout=\"this.src='"+png+"'\"/></a></td>";         
                }
            else {
            xmlContent += "<td> </td>";
            }
            count++
            start++
            }
        xmlContent += '</tr>'
    }

      //to generate pageinition
        xmlContent += "<tr>";
        xmlContent += "<td colspan='"+columns+"' align='center'>";

        if(whichPage > pagination) {
            xmlContent += "<a onclick='doPagination("+noPerPage*(whichPage-1-pagination)+")' style='cursor:pointer'><<</a> ";
        }
        if(whichPage > 1) {
            xmlContent += "<a onclick='doPagination("+noPerPage*(whichPage-1-1)+")' style='cursor:pointer'><</a> ";
        }

  //generate page numbers
    var fno = whichPage - midPagination;
    var lno = whichPage + midPagination;

  if(fno < 1 &&  noOfPage > pagination) {
       fno = 1;
       lno = pagination;
  }
  else if(fno < 1 && noOfPage <= pagination) {
      fno = 1;
      lno = noOfPage;
  }
  else if(lno > noOfPage && noOfPage <= pagination) {
   fno = 1;
            lno = noOfPage;       
        }
  else if(lno > noOfPage && noOfPage > pagination) {
      lno = noOfPage;
      fno = (lno - pagination) + 1;
  }

  //loop pages numbers
    for(var k=fno;k<=lno;k++) {
        if(whichPage == k) {
            xmlContent += "<b>"+k+"</b> ";
        }
        else {
            xmlContent += "<a onclick='generateTables("+noPerPage*(k-1)+")' style='cursor:pointer'>"+k+"</a> ";
        }
    }

    if(whichPage < noOfPage) {
        xmlContent += "<a onclick='generateTables("+noPerPage*(whichPage-1+1)+")' style='cursor:pointer'>></a> ";
    }
    if(whichPage <= (noOfPage - pagination)) {
        xmlContent += "<a onclick='generateTables("+noPerPage*(whichPage-1+pagination)+")' style='cursor:pointer'>>></a>";
    }

    xmlContent += "</td>";
    xmlContent += "</tr>";

    xmlContent += "</table>";

  //Add generated html content
    document.getElementById("content").innerHTML=xmlContent;
    //document.write(rows)  
    //content.innerHTML = xmlContent;

}