Handontableを使ってKintoneをExcelライクに入力しよう２（https://developer.cybozu.io/hc/ja/articles/207331836
）をカスタマイズして、レコードを500件以上取得できるようにしようと思っています。
今はカーソルAPIを使うべきだと分かっていますが、ちょっとよく分からず旧来の方法で取得しようとしています。
色々参考にして頑張ってみたのですが、ページネーションがうまくいかず、次の20件のレコードを参照するたびに白い空白が増えたかと思えば、いきなりデータが出ます（しかし、ページネーションは効かず）。
コンソールにエラーが発生しないため、どう解決すればいいか分かりません。。
ちなみにJavascriptは初心者でPromiseもなんとか分かる程度でサンプルを参考に書いただけなので、理解はできておらず勉強中です。。
何卒よろしくお願いいたします。
(function() {
"use strict";
var hot; // handsontable用変数
// kintoneのレコード更新・追加時は、Record_numberなどアップデートできないフィールドがあるので、除外するためのメソッド
var setParams = function(record) {
var result = {};
for (var prop in record) {
if (['Record_number', 'Created_datetime', 'Updated_datetime', 'Created_by', 'Updated_by'].indexOf(prop) === -1) {
result[prop] = record[prop];
}
}
return result;
};
// kintoneのレコード取得用メソッド
var getRecords = function(callback, errorCallback) {
kintoneUtility.rest.getAllRecordsByQuery({
app: kintone.app.getId(),
isGuest: false
}).then(function (resp){
callback(resp);
}).catch(function(resp){
errorCallback(resp);
});
}
// kintoneのレコード更新、追加用メソッド
var saveRecords = function(records, changedDatas, callback, errorCallback) {
var requests = [];
var updateRecords = [];
var insertRecords = [];
var changedRows = [];
var i;
// 変更されたセルの配列から、変更があった行だけ抜き出す
for(i = 0; i < changedDatas.length; i++) {
changedRows.push(changedDatas[i][0]);
}
// 変更があった行番号の重複を排除
changedRows = changedRows.filter(function (x, i, self) {
return self.indexOf(x) === i;
});
// 変更があった行から、レコード追加か変更かを判断し、クエリをつくる
for(i = 0; i < changedRows.length; i++) {
if (records[changedRows[i]]["Record_number"].value === null) {
insertRecords.push(
setParams(records[changedRows[i]])
);
} else {
updateRecords.push({
id: records[changedRows[i]]["Record_number"].value,
record: setParams(records[changedRows[i]])
});
}
}
// 更新用bulkRequest
requests.push({
method: "PUT",
api: "/k/v1/records.json",
payload: {
app: kintone.app.getId(),
records: updateRecords
}
});
// 追加用bulkRequest
requests.push({
method: "POST",
api: "/k/v1/records.json",
payload: {
app: kintone.app.getId(),
records: insertRecords
}
});
// bulkrequestで一括で追加、更新。
// 失敗した場合はロールバックされる。
kintone.api('/k/v1/bulkRequest', 'POST', {requests: requests},
function(resp) {
console.dir(requests);
console.dir(resp);
callback(resp);
},
function(resp) {
errorCallback(resp);
}
);
};
// kintoneのレコード削除用メソッド
var deleteRecords = function(records, index, amount, callback, errorCallback) {
var i;
var ids = [];
for(i = index; i < index+amount; i++) {
ids.push(records[i]["Record_number"].value);
}
kintone.api('/k/v1/records', 'DELETE', {app: kintone.app.getId(), ids: ids},
function(resp) {
callback(resp);
},
function(resp) {
errorCallback(resp);
}
);
};
// 一覧ビュー表示用のイベントハンドラ
kintone.events.on(['app.record.index.show'], function(event) {
if (event.viewId !== 1111111) return;
var container = document.getElementById('sheet');
// handsontable初期化
hot = new Handsontable(container, {
// この時点ではdataは入力せず、あとから読み込ませるようにする。（データ更新時も再読み込みさせたいため）
data: [],
// 表示したいカラム
colHeaders: ["Record No.", "Date", "Site", "Customer", "Group","Category", "Tar/Res", "Sales"],
// 必要に応じてreadOnlyの指定ができます。
columns: [
{data: "Record_number.value", readOnly: true},
{data: "Date.value", readOnly: true},
{data: "Site.value", readOnly: true},
{data: "Customer.value", readOnly: true},
{data: "Group.value", readOnly: true},
{data: "Category.value", readOnly: true},
{data: "Target.value", readOnly: true},
{data: "Sales.value"},
],
// スプレットシート上のレコードを削除したときに呼び出されるイベント
// 引数indexは削除する行
// 引数amountは削除する行数
beforeRemoveRow: function(index, amount) {
var self = this;
// kintoneのレコードを削除する
deleteRecords(this.getSourceData(), index, amount,
function(resp){
console.dir(resp);
getRecords(function(resp){
// 削除後、データを再読み込み
self.loadData(resp.records);
});
},
function(resp){
console.dir(resp);
}
);
},
// スプレットシート上のレコードが編集されたときに呼び出されるイベント
afterChange: function (change, source) {
var self = this;
console.log(source);
// データ読み込み時はイベントを終了
if (source === 'loadData') {
return;
}
// kintoneのレコードを更新、追加する
saveRecords(this.getSourceData(), change,
function(resp){
console.dir(resp);
getRecords(function(resp){
// 更新後、データを再読み込み
self.loadData(resp.records);
},
function(resp){
// レコード取得失敗時に呼び出される
console.dir(resp);
});
},
function(resp){
// 更新・追加時に呼び出される
console.dir(resp);
}
);
}
});
// レコードを取得してhandsontableに反映
getRecords(function(resp){
hot.loadData(resp.records);
});
});
})();