2017-11-09 9 views
0

私は剣道グリッドを開発しています。これはメインの行でファイルタイプとその総カウントを表示しています。この行を展開するとページングのすべてのデータが表示されます。剣道グリッド - jsonのページング総数を表示

私の総データが100ならばjsonでは10データのみが存在し、次のページをクリックすると次の10jsonデータが得られます。

ここで、ページネーションの合計結果を設定したいと思いますが、サンプルでは識別できない問題があります。私は、JSONが間違っているか、私が使用しaproachが間違っていることを確認していない私の例では http://jsfiddle.net/lhoeppner/y6KdK/

- 私はたとえば次のように使用これを示すため

EDIT 私のコードがある -

var jsonData = JSON.parse("{\"Report\":\"type1\",\"FileList\":[{\"owner\":\"machine-174\\\\admin\",\"path\":\"C:\\\\workarea\\\\WinTest1lakhfileinKB\\\\WinTest\\\\nGYh\\\\SMv\\\\U1P8FLx\\\\vMbhdo\\\\TgFSW\\\\42Ioulj0w.txt\"},{\"owner\":\"machine-174admin\",\"path\":\"C:\\\\workarea\\\\bada_data\\\\Employee Database - Copy (7) - Copy.mdb\"}],\"Count\":100,\"total\":10}"); 
$("#grid").kendoGrid({ 
      editable: false, 
      resizable: true, 
      filterable: true, 
      columns: [{ 
       field: "Report", 
       title: "Report" 
      }, { 
       field: "Count", 
       title: "Count" 
      }], 
      dataSource: { 
       data: jsonData, 
       schema: { 
        model: { 
         fields: { 
          Report: { 
           type: "string" 
          }, 
          Count: { 
           type: "number" 
          } 

         } 
        } 
       } 
      }, 
      detailInit: function (e) { 

       var dataSource = new kendo.data.DataSource({ 
        data: e.data.FileList, 

        aggregate: [{ 
         field: "size", 
         aggregate: "sum" 
        }], 
        schema:{ 
        total:"total" 
        }, 

        page: $("#grid").data("kendoGrid").dataSource.page(), 
        pageSize: 10, 
        resizable: true, 
        filterable: true, 
        scrollable: true 

       }); 
       dataSource.fetch(function() { 
        totalsize = null; 
        var result = null; 
        results = dataSource.aggregates().size; 
        totalsize = getSize(results.sum); 
       }); 

        childheader = "[{\"field\":\"path\",\"title\":\"Path\",\"width\":\"200px\"},{\"field\":\"owner\",\"title\":\"Owner\",\"width\":\"200px\"}]"; 
       var childhead = JSON.parse(childheader); 
       var dataSource = $("<div/>").appendTo(e.detailCell).kendoGrid({ 
        dataSource: { 
         data: e.data.FileList, 
         total:e.data.total, 
         editable: false, 
         pageSize: 10, 
         scrollable: true, 
         resizable: true, 
         filterable: true, 
         aggregate: [{ 
          field: "size", 
          aggregate: "sum" 
         }], 
         schema: { 
          total:"total", 
          parse: function (data) { 
           $.each(data, function (idx, elem) { 
            elem.size = getSize(elem.size); 
           }); 
           return data; 
          }, 
          model: { 
           fields: { 

            path: { 
             type: "string" 
            }, 

            owner: { 
             type: "string" 
            } 


           } 
          } 
         } 
        }, 

        columns: childhead, 
        sortable: true, 
        pageable: true, 
        resizable: true, 
        filterable: true, 
        scrollable: true, 
        serverPaging: false, 

        pageable: { 
          pageSize: 2, 
          refresh: true, 
          change:function(e){ 
            console.log("page change event"); 
          } 
        } 
       }); 

      } 
     }); 
     function getSize(val) { 
     var bytes = val; 
     var size = null; 
     var sizes = ['Bytes', 'KB', 'MB', 'GB']; 
     if (bytes > 0) { 
      var i = parseInt(Math.floor(Math.log(bytes)/Math.log(1024))); 
      size = Math.round(bytes/Math.pow(1024, i), 2) + ' ' + sizes[i]; 
      return size; 
     } 
    } 

私の例はここにある - 私はページごとに、私は2を持っている場合でも、2つのデータと合計10ページを表示したい。この例では https://jsfiddle.net/pporwal26/2ub1rvc2/8/

json内のデータを取得し、ページ変更機能によって次のページデータを取得します。

答えて

0

あなたがやらなければならないことは、一つに、あなたのページサイズとページ可能属性を設定されています

pageable: { 
     input: true, 
     numeric: false, 
     refresh: true, 
     pageSizes: true, 
     pageSize: 10 
    }, 

ちょうどあなたのデータソースを通して、あなたのデータに持参し、それが10

刻みで各ページにグリッドを設定します
関連する問題