Jqgrid и прогрессивное улучшение: Успешно переходит от HTML к локальному JSON, к удаленному JSON, но пейджер не запускается правильно?

Посмотрите, что происходит в моей скрипте здесь: http://jsfiddle.net/tbH5H/

Я пытаюсь добиться правильного прогрессивного улучшения с помощью jgrid. Все работает отлично, за исключением того, что я не знаю, как предоставить jqgrid правильную информацию о пейджере при первой загрузке. Мой серверный скрипт выводит JSON и соответствующую HTML-таблицу для SEO-ботов. Но как я могу также указать правильное общее количество страниц для jqgrid при этой первой локальной загрузке? Пейджер работает правильно после удаленного извлечения данных, как вы можете видеть в скрипте.

HTML

<table id="grid">
    <tr><th>ID</th><th>State</th></tr>
    <tr><td>1</td><td>Alaska</td></tr>
    <!-- etc...server side script dumps this out for SEO... -->
</table>
<div id="pager"></div>

JS

$("#grid").jqGrid({
    datatype:'local',
    // Server side script dumps this JSON out for first load only, 
    // other requests will come from remote source, see further down...
    data: [{"id":1,"state":"Alabama"},
           {"id":2,"state":"Alaska"},
           {"id":3,"state":"Arizona"},
           {"id":4,"state":"Arkansas"},
           {"id":5,"state":"California"},
           {"id":6,"state":"Colorado"},
           {"id":7,"state":"Connecticut"},
           {"id":8,"state":"Delaware"},
           {"id":9,"state":"Florida"},
           {"id":10,"state":"Georgia"}],  
    height: 250,
    width: 450,
    rowNum:10,
    colNames:['ID','State'],
    colModel:[
       {name:'id',    index:'id',    width:50},
       {name:'state', index:'state', width:100}
    ],
    caption: "States of the USA",
    pager: '#pager'
});
$("#grid").jqGrid('navGrid', '#pager',{edit: false, add: false, del: false, search: false, refresh: true});         

   // Convert the grid to read remotely, but don't trigger a unnecessary reload...
   // (because queries are expensive! We shouldn't need to run them twice!)
   $('#grid').jqGrid("setGridParam",{datatype:"json", mtype:"POST", url:"/some/url/here"});
   $('#grid').jqGrid("setGridParam",{postData:data});

jquery jqgrid progressive-enhancement pager
person prograhammer    schedule 02.04.2014    source источник
comment
Зачем нужно сбрасывать первую загрузку? Мне это не кажется правильным. Почему все не может быть на стороне сервера?   -  person Aneesh Vijendran    schedule 03.04.2014
comment
Как гугл узнает о данных, если все сразу обрабатывается через ajax?   -  person prograhammer    schedule 03.04.2014

Ответы (2)


arrow_upward
1
arrow_downward

Понятно!

Мне нужно было использовать localReader. См. новую скрипку: http://jsfiddle.net/2UCk6/

localReader: {
    // These values would be inserted on first page load from server-side script
    page: function(obj) { return 1; },
    total: function(obj) { return 5; }, 
    records: function(obj) { return 50; }
},
person prograhammer    schedule 03.04.2014

arrow_upward
0
arrow_downward

Ваши данные должны быть в следующем формате:

{ 
  "total": "xxx", 
  "page": "yyy", 
  "records": "zzz",
  "rows" : [{"id":1,"state":"Alabama"},
       {"id":2,"state":"Alaska"},
       {"id":3,"state":"Arizona"},
       {"id":4,"state":"Arkansas"},
       {"id":5,"state":"California"},
       {"id":6,"state":"Colorado"},
       {"id":7,"state":"Connecticut"},
       {"id":8,"state":"Delaware"},
       {"id":9,"state":"Florida"},
       {"id":10,"state":"Georgia"}]
}

Где:

total   =  total pages for the query
page    = current page of the query
records = total number of records for the query
rows    = an array that contains the actual data

Вам нужно настроить json reader для вышеуказанного, например, как показано ниже:

 jsonReader : {
     root: "rows",
     page: "page",
     total: "total",
     records: "records",
     repeatitems: false,
     cell: "cell",
     ...
   },
...

Дополнительную информацию с примерами можно найти здесь: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data

Обновить

У вас не может быть этой функции, если тип данных является локальным. Когда тип данных является локальным, Jqgird игнорирует страницу/запись и т.д. Вероятно, вам следует попробовать виртуальную прокрутку -> Перейти к демонстрации Jqgrid -> Новое в версии 3.7 -> Виртуальная прокрутка.

Или, возможно, вам следует выполнить вызов сервера и вернуть данные, которые вы собираетесь использовать как локальные со страницей/записями и т. д.?

person Aneesh Vijendran    schedule 02.04.2014
comment
Вот обновленная скрипта, показывающая, что эти настройки не работают: jsfiddle.net/NJ2nr/3 Есть идеи? - person prograhammer; 03.04.2014
comment
@DavidGraham - Обновил ответ, имеет ли это смысл? - person Aneesh Vijendran; 03.04.2014
comment
Я приближаюсь к этому: jsfiddle.net/NJ2nr/6 Сначала нужно нажать "Выполнить". - person prograhammer; 03.04.2014
comment
@DavidGraham Я обновил jsfiddle, теперь записи вернулись. jsfiddle.net/NJ2nr/9 - person Aneesh Vijendran; 03.04.2014
comment
хммм... хорошо... это может сработать. Позвольте мне проверить это в моем приложении. Вернись через несколько минут, и я приму твой ответ. Видеть! Никогда не сдавайся! :-) - person prograhammer; 03.04.2014
comment
кажется, работает только на jsfiddle после нажатия кнопки «Выполнить». Не могу заставить его работать в моем собственном приложении... все еще работаю над ним... - person prograhammer; 03.04.2014
comment
Похоже, что при установке типа данных в json сетка делает первоначальный вызов ajax. Так что ваша скрипка не решила проблему. :-( - person prograhammer; 03.04.2014