Значки jqGrid Pager не отображаются

Я прочитал несколько других сообщений по этой проблеме Stack и не смог найти решение. Вот ссылки для моего html. Я пропустил какой-либо CSS или что-то еще?Значки jqGrid Pager не отображаются

<script src="jquery/jquery-1.4.1.min.js"></script> 
<script src="jquery/jquery-1.4.1.js"></script> 

<!-- jqGrid --> 
<link rel="stylesheet" type="text/css" href="jqGrid/ui.jqgrid.css" /> 
<link rel="stylesheet" type="text/css" href="jqGrid/jquery-ui-custom.css" /> 
<script src="jqGrid/grid.locale-en.js" type="text/javascript"></script> 
<script src="jqGrid/jquery.jqGrid.min.js" type="text/javascript"></script>

Код, который я тестирую, является лишь копией примера с сайта jqGrid.

$(document).ready(function (event) { 

    jQuery("#listArray").jqGrid({ 
    datatype: "local", 
    height: 100, 
    colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'], 
    colModel: [ 
     { name: 'id', index: 'id', width: 60, sorttype: "int" }, 
     { name: 'invdate', index: 'invdate', width: 90, sorttype: "date" }, 
     { name: 'name', index: 'name', width: 100 }, 
     { name: 'amount', index: 'amount', width: 80, align: "right", sorttype: "float" }, 
     { name: 'tax', index: 'tax', width: 80, align: "right", sorttype: "float" }, 
     { name: 'total', index: 'total', width: 80, align: "right", sorttype: "float" }, 
     { name: 'note', index: 'note', width: 150, sortable: false } 
    ], 
    multiselect: false, 
    caption: "Manipulating Array Data", 
    rowNum: 6, 
    rowList: [3, 6, 9], 
    pager: '#jqPager', 
    }); 

    var mydata = [ 
     { id: '1', invdate: '2007-10-01', name: 'test', note: 'note', amount: '200.00', tax: '15.37', total: '210.89' }, 
     { id: "2", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" }, 
     { id: "3", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }, 
     { id: "4", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" }, 
     { id: "5", invdate: "2007-10-05", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" }, 
     { id: "6", invdate: "2007-09-06", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }, 
     { id: "7", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" }, 
     { id: "8", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" }, 
     { id: "9", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" } 
     ]; 

    for (var i = 0; i <= mydata.length; i++) { 
    jQuery("#listArray").addRowData(i + 1, mydata[i]); 
    }

Другое дело, что номер страницы работает неправильно. Когда я впервые загружу страницу, она покажет страницу 1 из 0. Когда я нажимаю на поле «Записи на страницу», чтобы перейти к чему-то, кроме значения по умолчанию, номер страницы будет обновляться правильно. Есть ли способ исправить это, чтобы номер страницы показывал правильную страницу 1 из 2 при загрузке страницы?

Спасибо!

источник

2014-01-23 JimC

У вас есть код для "navGrid"? Также см. Аналогичный вопрос: http://stackoverflow.com/questions/3491963/pagination-problem-in-jqgrid-with-array-data – vissu

Спасибо! Эта ссылка помогла мне исправить проблему разбивки на страницы. Не знал, что мне пришлось перезагрузить Grid после добавления этих строк. – JimC

Я рад, что смогу помочь вам :) – vissu

Я нашел некоторые синтаксические ошибки в вашем коде и исправил несколько логических данных на основе ваших локальных данных. Который работает отлично для меня. Я добавил локальные данные непосредственно в jqgrid. Подобно этому,

datatype: "local", 
height: 'auto', 
data : mydata,

И ваш HTML может выглядеть так,

<table id="listArray"> 
<tr> 
    <td /> 
</tr> 
</table> 
<div id="jqPager"></div>

Конечно, вы должны добавить navGrid часть. Например,

$("#listArray").jqGrid('navGrid', '#jqPager', 
      { edit: false, add: false, del: false });

Это Demo вашего кода. Надеюсь это поможет.

источник

2014-01-24 09:41:12

Спасибо! Это действительно помогло мне выяснить, чего не хватает. Я исправил проблему, используя используемый вами CSS-файл Google. Это navGrid действительно круто, но это только половина работает на моей стороне. Я скопировал ваш код точно, но кнопка «Найти» не находит поиск правильно, как ваша демонстрация. Любые идеи почему? – JimC

Добро пожаловать. Отметьте это как ответ, если найдете его полезным. Вы имеете в виду кнопку поиска в своей сетке? –

Да, кнопка «Найти записи». Он работает только для определенных полей, таких как числа, но не для текстовых полей. Он также не работает для поля «Inv No». – JimC

Для меня это был случай с файлами .png, которые не получили. В jquery-ui.css измените свою относительную ссылку, поставив ../ спереди, например images/xxxxx.png становится ../images/xxxxxx.png

источник

2014-12-30 11:30:40

Значки jqGrid Pager не отображаются

ответ

Смежные вопросы