Блог

Главная - Вопросы по программированию - панель разбивки на страницы jqgrid отображает не все страницы

панель разбивки на страницы jqgrid отображает не все страницы

#javascript #xml #jqgrid #pagination

#javascript #xml #jqgrid #разбивка на страницы

Вопрос:

Я создал простую сетку, которая извлекает данные с сервера через php. Количество строк в базе данных MYSQL равно 9.
Я решаю изменить параметр rowNum с rowNum:10 на rowNum: 7 и посмотреть, что произойдет. Как я и ожидал, в сетке появилось 7 строк. Проблема в том, что я не вижу остальные 2. На панели пейджеров нет второй страницы (как говорится на странице 1 из 1).
Затем я добавляю параметр recordtext и устанавливаю его в этот текст записи: ‘{0} — {1} из {2}’. Обновите страницу, и в правом нижнем углу сетки появится этот текст «1-7 из 9». Это означает, что все данные возвращены с сервера, но что-то пошло не так с разбиением на страницы.

Позвольте мне опубликовать код.

index.html

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>

<link rel="stylesheet" type="text/css" media="screen" href="css/smoothness/jquery-ui-1.8.16.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />

<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>


<style>
html, body {
    margin: 0;
    padding: 0;
    font-size: 75%;
}
</style>


<script type="text/javascript">

$(function(){ 

  mygrid = $("#list");

  mygrid.jqGrid({
    url:'example1.php',
    datatype: 'xml',
    mtype: 'GET',
    colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
    colModel :[ 
      {name:'invid', index:'invid', width:55}, 
      {name:'invdate', index:'invdate', width:90}, 
      {name:'amount', index:'amount', width:80, align:'right', search:true , stype:'select', searchoptions:{value:':All;8:8.00;6:6.00'}}, 
      {name:'tax', index:'tax', width:80, align:'right'}, 
      {name:'total', index:'total', width:80, align:'right', sortable:true}, 
      {name:'note', index:'note', width:150, search:true , align:'center'} 
    ],
    pager: '#pager',
    emptyrecords: "Nothing to display",
    recordtext: '{0} - {1} of {2}',
    rowNum:7,
    rowList:[7,9,11],
    viewrecords: true,
    caption: 'My first grid'

  });
  //Search button
  $("#bsdata").click(function(){ mygrid.jqGrid('searchGrid', {sopt:['eq'],top:300,caption:"test searching"} ); });
  // Search toolbar.
  mygrid.jqGrid('filterToolbar', {stringResult: true, searchOnEnter: false, defaultSearch : "eq"});
  //NavBar
  mygrid.jqGrid('navGrid','#pager',{edit:false,add:false,del:false});
}); 


</script>

</head>
<body>

<table id="list"><tr><td/></tr></table> 
<div id="pager"></div> 
<input type="BUTTON" id="bsdata" value="Search" />


</body>
</html>

и example1.php

 <?php
$page = 1; // $_GET['page']; // get the requested page
$limit = 9; //$_GET['rows']; // get how many rows we want to have into the grid
$sidx = 'invid';//$_GET['sidx']; // get index row - i.e. user click to sort
$sord = 'invid';//$_GET['sord']; // get the direction
if(!$sidx) $sidx =1;

//array to translate the search type
$ops = array(
    'eq'=>'=', //equal
    'ne'=>'<>',//not equal
    'lt'=>'<', //less than
    'le'=>'<=',//less than or equal
    'gt'=>'>', //greater than
    'ge'=>'>=',//greater than or equal
    'bw'=>'LIKE', //begins with
    'bn'=>'NOT LIKE', //doesn't begin with
    'in'=>'LIKE', //is in
    'ni'=>'NOT LIKE', //is not in
    'ew'=>'LIKE', //ends with
    'en'=>'NOT LIKE', //doesn't end with
    'cn'=>'LIKE', // contains
    'nc'=>'NOT LIKE'  //doesn't contain
);
function getWhereClause($col, $oper, $val){
    global $ops;
    if($oper == 'bw' || $oper == 'bn') $val .= '%';
    if($oper == 'ew' || $oper == 'en' ) $val = '%'.$val;
    if($oper == 'cn' || $oper == 'nc' || $oper == 'in' || $oper == 'ni') $val = '%'.$val.'%';
    return " WHERE $col {$ops[$oper]} '$val' ";
}
$where = ""; //if there is no search request sent by jqgrid, $where should be empty
$searchField = isset($_GET['searchField']) ? $_GET['searchField'] : false;
$searchOper = isset($_GET['searchOper']) ? $_GET['searchOper']: false;
$searchString = isset($_GET['searchString']) ? $_GET['searchString'] : false;
if ($_GET['_search'] == 'true') {
    $where = getWhereClause($searchField,$searchOper,$searchString);
}

// connect to the database
$dbhost = "localhost";
$dbuser = "user";
$dbpassword = "user123";
$database = "test";
$tablename = "invheader";
$db = mysql_connect($dbhost, $dbuser, $dbpassword)
or die("Connection Error: " . mysql_error());

mysql_select_db($database) or die("Error conecting to db.");
//mysql_set_charset('utf8',$database);
mysql_query("SET NAMES 'utf8'");
$result = mysql_query("SELECT COUNT(*) AS count FROM $tablename");
$row = mysql_fetch_array($result,MYSQL_ASSOC);
$count = $row['count'];


if( $count >0 ) {
    $total_pages = ceil($count/$limit);
} else {
    $total_pages = 0;
}


if ($page > $total_pages) $page=$total_pages;

$start = $limit*$page - $limit; // do not put $limit*($page - 1)

$SQL = "SELECT invid, invdate, amount, tax, total, note FROM $tablename ".$where." ORDER BY $sidx, $sord LIMIT $start , $limit";

$result = mysql_query( $SQL ) or die("Couldn?t execute query.".mysql_error());

if ( stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml xml") ) {
header("Content-type: application/xhtml xml;charset=utf-8"); } else {
header("Content-type: text/xml;charset=utf-8");
}


$et = ">";

echo "<?xml version='1.0' encoding='utf-8'?$etn";
echo "<rows>";
echo "<page>".$page."</page>";
echo "<total>".$total_pages."</total>";
echo "<records>".$count."</records>";
// be sure to put text data in CDATA
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
    echo "<row id='". $row['invid']."'>";
    echo "<cell>". $row['invid']."</cell>";
    echo "<cell>". $row['invdate']."</cell>";
    echo "<cell>". $row['amount']."</cell>";
    echo "<cell>". $row['tax']."</cell>";
    echo "<cell>". $row['total']."</cell>";
    echo "<cell><![CDATA[". $row['note']."]]></cell>";
    echo "</row>";
}
echo "</rows>";
?>

Дополнительно пытался использовать этот метод, но также ничего не изменилось.
Есть идеи? Можете ли вы дать мне несколько советов?

Заранее спасибо.

Ответ №1:

Я полагаю, что ваш серверный код помещает неверное значение total страниц. Если rowNum: 7 и у вас есть 9 элементов в базе данных, то в ответе сервера должно быть: <page>1</page> , <total>2<total> и <records>2<records> . Таким образом, общее количество страниц должно быть 2, а не 1.

Проблема, похоже, в коде, как вы вычисляете $total_pages . Вы используете

 $total_pages = ceil($count/$limit);

Я предлагаю вам изменить ее на

 $total_pages = floor(($count   $limit - 1)/$limit);

Значение $total_pages должно быть 1 для $count <= $limit и 2 для $count = $limit 1 .

Кроме того, вы забыли использовать var раньше mygrid = $("#list"); .

Ответ №2:

Итак. Ошибка была вызвана нубовским кодированием.

Как вы можете видеть в верхней части php-файла, у меня есть это
$ page = 1; // $ _GET [‘страница’]; // получаем запрошенную страницу
$ limit = 9; //$ _GET [‘строки’]; // получаем, сколько строк мы хотим иметь в сетке

В то время как html-файл отправляет rowNum: 7, в php это число стало 9, и именно поэтому там говорилось Страница 1 из 1.

Чтобы решить проблему, мне просто пришлось стереть комментарии и использовать метод $_GET.

Также я изменяю то, что сказал Олег.