2

現在下記ソースのようにjqueryのcolumnsを使用して実装をしています。
データの無い行も含めて常に50行を表示したいのですが、方法が分かりません。
また、常に50行を表示したいので、表示行数設定は削除したいです。
ご教授をお願いします。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DataTable</title>
<link id="style" href="css/classic.css" rel="stylesheet" media="screen">
</head>
<body>

<div id="columns"></div>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/jquery.columns.min.js"></script>
<script>
$(function () {
   // 取得した入力を基に、URL作成
   var url = "http://ooo";
   // 表示欄にjsonのデータを出力
    $.get(url, function (json) {
    $('#columns').columns({
        data: json
    });
  });
});
</script>


0

3 件の回答 3

1

columnsはSchemaというオプションの中にtemplateを追加してデフォルトのtemplateをカスタマイズできます。show rowsの非表示や表示行の固定もそこで出来ます
下記のTemplatingの項を参照
http://eisenbraun.github.io/columns/

3
  • 表示行数設定(Show rows:)によって、表示件数が変化してしまうように思います。 Commented 2015年3月10日 5:57
  • 1
    columnsの中で行生成ロジックが$.each($this.data, function(key, row) {})となっているので一筋縄ではいかなさそうです。 Commented 2015年3月10日 6:06
  • 返答ありがとうございます。諦めて違う方法を探すことも考慮しておきます。 Commented 2015年3月10日 6:18
1

要素を50件で切り出し、50件未満の場合には空のオブジェクトを追加するという方法を考えましたがどうでしょうか。

json = json.slice(0, 50);
for(var i=json.length; i<50; i++){
  json.push({});
}
1
  • ご返答ありがとうございます。 表示行数設定(Show rows:)によって、表示件数が変化してしまうように思います。 Commented 2015年3月10日 6:16
1

後でreject覚悟でcolumnsのgithubでissue作ってみますが。
もしjquery.columns.jsを修正してもよければ……。

[jquery.columns.js]
 this.paginate = function() {
 …省略…
   $this.data = $this.data.slice($this.range.start-1,$this.range.end);
+  if ($this.blank) {
+    var gap = $this.size - $this.data.length;
+    for (var i = 0; i < gap; i++) {
+      $this.data.push($this.blank);
+    }
+  }
 }

として、呼び出し側のオプションで

$('#columns').columns({
    data: json,
    blank: {"年": "", "国": "", "都市": ""}
});

とすることで対応可能かと思います。
修正範囲が少ないので検討してみてください。

追伸:
見てもらえるのかも不明ですがrequest投げました。
https://github.com/eisenbraun/columns/pull/8

1
  • 返答ありがとうございます。 参考に実装してみたいと思います。 Commented 2015年3月10日 7:08

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。