【Laravel】【Datatables】フッターに値を設定する

LaravelのDatatablesにてフッターに対して、

各カラムの合計を表示したいと思っても

メソッド１つでうまいことできるものはなくて、

地道に実装しないといけなかったりしました。

今回はそのコードの紹介ですー。

コード

テーブルロード

これは前回の通り。

フッターへの値の設定

これも前回の通りhtmlビルダーのparameters内、

initComplete内で行います。

$this->builder()
->parameters([
 'initComplete' => "function () {
    // 全カラムをループ
    this.api().columns().every(function () {
      var column = this;

      // カラムの順番はcolumn[0]に格納されている
      if (column[0] == 0) {
        $(column.footer()).text('合計');
        $(column.footer()).addClass('text-center');
        $(column.footer()).parent().next().find('th:nth-of-type(1)').removeClass('no-border');
      }

      // 合計
      if (column[0] == 1) {
        var sum = 0;
        // column.data()に各行の値が入っているためループで加算してく
        for (let i = 0; i < column.data().length; ++i) {
          // 例えば金額だった場合などはここで数値変換しておく
          sum += Number(column.data()[i].replace('円', '').replace(/,/, ''));
        }
        
　　　　// フッターへ設定する
　　　　$(column.footer()).text(sum.toLocaleString() + '円');
      }
  .....
  }"
                
])

$this->builder()

->parameters([

'initComplete' => "function () {

// 全カラムをループ

this.api().columns().every(function () {

var column = this;

// カラムの順番はcolumn[0]に格納されている

if (column[0] == 0) {

$(column.footer()).text('合計');

$(column.footer()).addClass('text-center');

$(column.footer()).parent().next().find('th:nth-of-type(1)').removeClass('no-border');

}

// 合計

if (column[0] == 1) {

var sum = 0;

// column.data()に各行の値が入っているためループで加算してく

for (let i = 0; i < column.data().length; ++i) {

// 例えば金額だった場合などはここで数値変換しておく

sum += Number(column.data()[i].replace('円', '').replace(/,/, ''));

}

　　　　// フッターへ設定する

　　　　$(column.footer()).text(sum.toLocaleString() + '円');

}

.....

])

以上です。

それでは！！！

にほんブログ村

人気ブログランキング

たーちゃん

20代前半までは東京で音楽をやりながら両手の指以上の業種でアルバイト生活をしていましたが、某大手プロバイダのテレアポのバイトでPCの知識の無さに愕然とし、コンピュータをもっと知りたい！と思ったことをきっかけに25歳の時にITの世界に未経験で飛び込みました。
紆余曲折を経て、現在は個人事業主としてお仕事させていただいており、10年ほどになります。
web制作から企業システム構築、ツール開発など、フロントエンドもバックエンドもサーバーもDBAも依頼があれば何でもやってきた雑食系エンジニアです。

今風にいうとフルスタックエンジニアということになるのかしら？？

→ 詳細プロフィールというか、生い立ちはこちら

→スキルシートをご覧になる場合はこちら

→お仕事のご依頼やお見積りなどお問い合わせはこちらから！