Skip to content

Instantly share code, notes, and snippets.

@tobijibu

tobijibu/createCol.js Secret

Created May 1, 2017 07:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tobijibu/79f25594ce00b35f0e57c1111f78e9a4 to your computer and use it in GitHub Desktop.
Save tobijibu/79f25594ce00b35f0e57c1111f78e9a4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
createCol.js
//テーブルデータ json形式で定義
const tableData = [
{ id : 1, animal : 'inu', type : null, origin : null, cnt : 6, },
{ id : 2, animal : 'inu', type : 'pug', origin : 'china', cnt : 6, },
{ id : 3, animal : 'inu', type : 'samoyed', origin : 'russia', cnt : 3, },
{ id : 4, animal : 'inu', type : 'shiba', origin : 'japan', cnt : 5, },
{ id : 5, animal : 'neko', type : null, origin : null, cnt : 1, },
{ id : 6, animal : 'neko', type : 'exotic', origin : 'us', cnt : 4, },
{ id : 7, animal : 'neko', type : 'mike', origin : 'japan', cnt : 2, },
{ id : 8, animal : 'neko', type : 'ragdoll', origin : 'us', cnt : 6, },
];
var DATA_TABLES = DATA_TABLES || {};
DATA_TABLES = {
setting : {
//テーブルデータをセット
data : tableData,
//カラム設定
columnDefs : [
{ 'title' : '', 'data' : null, 'targets' : 0, },
{ 'title' : '動物', 'data' : 'animal', 'targets' : 1, },
{ 'title' : '種別', 'data' : 'type', 'targets' : 2, },
{ 'title' : '原産国', 'data' : 'origin', 'targets' : 3, },
{ 'title' : '匹数', 'data' : 'cnt', 'targets' : 4, },
],
//行毎の処理
//特定の列に対して処理する場合は、$('td:eq(n)', row)を使う
createdRow : function(row, data, dataIndex) {
let disp_chkbox = $('td:eq(0)', row),
_chkbox = $('<input>', {
type : 'checkbox',
name : 'select',
value : data.id,
});
//セルの値を空にする
disp_chkbox.text('');
//チェックボックスを追加
disp_chkbox.append(_chkbox);
},
},
};
//JSONデータからテーブルを生成生成
$(document).ready(function(){
$('#myTable').DataTable(DATA_TABLES.setting);
});
Raw
full.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
//テーブルデータ json形式で定義
const tableData = [
{ id : 1, animal : 'inu', type : null, origin : null, cnt : 6, },
{ id : 2, animal : 'inu', type : 'pug', origin : 'china', cnt : 6, },
{ id : 3, animal : 'inu', type : 'samoyed', origin : 'russia', cnt : 3, },
{ id : 4, animal : 'inu', type : 'shiba', origin : 'japan', cnt : 5, },
{ id : 5, animal : 'neko', type : null, origin : null, cnt : 1, },
{ id : 6, animal : 'neko', type : 'exotic', origin : 'us', cnt : 4, },
{ id : 7, animal : 'neko', type : 'mike', origin : 'japan', cnt : 2, },
{ id : 8, animal : 'neko', type : 'ragdoll', origin : 'us', cnt : 6, },
];
var DATA_TABLES = DATA_TABLES || {};
DATA_TABLES = {
setting : {
//テーブルデータをセット
data : tableData,
//カラム設定
columnDefs : [
{ 'title' : '', 'data' : null, 'targets' : 0, },
{ 'title' : '動物', 'data' : 'animal', 'targets' : 1, },
{ 'title' : '種別', 'data' : 'type', 'targets' : 2, },
{ 'title' : '原産国', 'data' : 'origin', 'targets' : 3, },
{ 'title' : '匹数', 'data' : 'cnt', 'targets' : 4, },
],
//行毎の処理
//特定の列に対して処理する場合は、$('td:eq(n)', row)を使う
createdRow : function(row, data, dataIndex) {
let disp_chkbox = $('td:eq(0)', row),
_chkbox = $('<input>', {
type : 'checkbox',
name : 'select',
value : data.id,
});
//セルの値を空にする
disp_chkbox.text('');
//チェックボックスを追加
disp_chkbox.append(_chkbox);
},
},
};
//JSONデータからテーブルを生成生成
$(document).ready(function(){
$('#myTable').DataTable(DATA_TABLES.setting);
});
</script>
</head>
<body>
<table id="myTable"></table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment