★テーブルのライブラリーを利用して表示したい

kintone カスタマイズ
1

DataTablesのライブラリーを利用して表示したいですが、レイアウトは下記通りになっています。何が原因か分からないです。
分かっている方がいらっしゃたら、教えていただけませんか？

• URL:https://js.cybozu.com/datatables/v1.10.13/js/jquery.dataTables.min.js
• URL:https://js.cybozu.com/datatables/v1.10.13/css/jquery.dataTables.min.css

■ html<table width=“100%” class=“display” id=“example” cellspacing=“0”>
 <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>

</table>

■javascript

(function(){
 “use strict”;

 kintone.events.on(“app.record.index.show”, function(e) {
         $(document).ready(function(){
         $(‘#example’).DataTable();
        });
       
    });
})();

■

■現在のOutput

 

 

 

 

 

2

myasawayeさん

jquery-dataTables.min.jsはjQueryプラグインなので、jQueryよりも後に読み込まれる必要があるのではないでしょうか？

jQueryのJavaScriptを読み込み順一番上にしてやり直してみてもらえますか？

3

瀧ヶ平様

表示されています。

ご回答、ありがとうございます。

 

4

■html

<div id=“my-customized-view”>

   <table width=“100%”>
        <tr>
            <td>社員番号</td>
            <td><input type=“text” name=“empNo” id=“txtEmpNo” maxlength=“10” width=“70px”></td>
            <td></td>
        </tr>
        <tr>
            <td>研修名</td>
            <td><select id=“ddlKenshuNm” name=“ddlKenshuNm” width=“70px”>
            <option></option>
            </select></td>
            <td><input type=“button” id=“btnSearch” value=“検索”/></td>
        </tr>
   </table>

   <table width=“100%” class=“display” id=“example” cellspacing=“0”>
     <tr>
          <td class=“w100”>社員番号</td>
<td class=“w100”>氏名</td>
<td class=“w100”>フリガナ</td>
<td class=“w100”>部部署名</td>
<td class=“w100”>グループ名</td>
          <td class=“w150”>研修/セミナー/講座名</td>
<td class=“w100”>受講日</td>
<td class=“w100”>メールアドレス</td>

</tr>       
    <tbody id=“my-tbody”>
    </tbody>

  </table>

</div>

■javascript

var myRecordSpace = document.getElementById(‘my-tbody’);
     myRecordSpace.innerHTML = ‘’;
var row = myRecordSpace.insertRow(myRecordSpace.rows.length);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    var cell5 = row.insertCell(4);
    var cell6 = row.insertCell(5);
    var cell7 = row.insertCell(6);
    var cell8 = row.insertCell(7);
 
    cell1.innerHTML = empInfoArray[0];
    cell2.innerHTML = empInfoArray[1];
    cell3.innerHTML = empInfoArray[2];
    cell4.innerHTML = empInfoArray[3];
    cell5.innerHTML = empInfoArray[4];
    cell6.innerHTML = getarr[1];
    cell7.innerHTML = getarr[2];
    cell8.innerHTML = empInfoArray[5];

見ずらいですが、JavaScriptから行を挿入して表示しています。DataTableのライブラリーを使用して出力したいのですが、下記のコードをどう書けばよいでしょうか？HTMLのコードも合わせて教えていただけますでしょうか？

$(document).ready(function(){
 $(‘#example’).DataTable();
});

■現状のOutput

 

5

myasawayeさん

当方DataTableを利用したことがないのでおそらくですが、$(document).readyのコールバック内部でDataTableを実行する必要はなく、レコード一覧画面の表示時イベントでテーブルの行要素を作成した後に、$(“#example”).DataTable();を実行すればDataTableを利用できるのではないでしょうか？

JavaScriptで行要素作成は出来ているようなので、以下のような形のコードで大丈夫だと思います。

(function(){
"use strict";

kintone.events.on("app.record.index.show", function(e) {
/* テーブル要素の作成処理をここに入れる */
$('#example').DataTable();
});
})();