.font-default{
font-family:Helvetica Neue,Helvetica,Arial,ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,MS¥ Pゴシック,MS PGothic,sans-serif}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.css"/>
<script src="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.js"></script>
<!-- checkbox用 -->
<link type="text/css" href="//gyrocode.github.io/jquery-datatables-checkboxes/1.0.3/css/dataTables.checkboxes.css" rel="stylesheet" />
<script type="text/javascript" src="//gyrocode.github.io/jquery-datatables-checkboxes/1.0.3/js/dataTables.checkboxes.min.js"></script>
<script src="./js/dataTables.checkboxes.js"></script>
<script>
jQuery(function($){
$("#foo-table").dataTable({
// json read
ajax: { url: "a3.json", dataSrc: '' },
columns: [
{ data: "id" },
{ data: "name" }
],
// checkbox
// 'columnDefs': [
// {
// 'targets': 0,
// 'checkboxes': {
// 'selectRow': true
// }
// }
// ],
'columnDefs': [{
'targets': 0,
// 色が入るがgetにわたらない
// 'checkboxes': {
// 'selectRow': true
// },
'searchable': false,
'orderable': false,
'className': 'dt-body-center',
'render': function (data, type, full, meta){
return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';
}
}],
'select': {
'style': 'multi'
},
'order': [[1, 'asc']]
});
// デフォルトの設定を変更
$.extend( $.fn.dataTable.defaults, {
language: {
url: "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json"
}
});
// Handle form submission event
$('#frm-example').on('submit', function(e){
var form = this;
var rows_selected = table.column(0).checkboxes.selected();
// Iterate over all selected checkboxes
$.each(rows_selected, function(index, rowId){
// Create a hidden element
$(form).append(
$('<input>')
.attr('type', 'hidden')
.attr('name', 'id[]')
.val(rowId)
);
});
});
});
</script>
<style type='text/css'>
<!--
/* listの色 */
tbody .selected {
background-color: #E3EAEE;
}
tbody tr:hover {
background-color: #DDE0FF;
}
-->
</style>
<title>jquery datatables の check box</title>
</head>
<body>
<pre>
jquery datatables の check box
check boxを表示してgetでサーバに飛ばせで
hoverで色変えれるとこまで確認
あとは ホスト、プロジェクトなど
同じ値の場合時のみ ボタンを activeにする
</pre>
<br>
<form name="frm-example" id="frm-example">
<table id="foo-table" class="table table-bordered">
<thead>
<tr><th>No</th><th>都道府県</th></tr>
</thead>
</table>
<p class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</p>
<p>
<b>Selected rows data:</b><br>
<pre id="example-console-rows"></pre>
</p>
<p>
<b>Form data as submitted to the server:</b><br>
<pre id="example-console-form"></pre>
</p>
</form>
</body>
</html>
★
./js/dataTables.checkboxes.js"
http://www.gyrocode.com/projects/jquery-datatables-checkboxes/
・
http://aucket.blog.jp/dataTables.checkboxes.js
[
{
"id": 1,
"name": "北海道"
},
{ "id": 2, "name": "青森県8" },
{ "id": 3, "name": "岩手県" },
{ "id": 4, "name": "宮城県" },
{ "id": 5, "name": "秋田県" },
{ "id": 6, "name": "山形県" },
{ "id": 7, "name": "福島県" },
{ "id": 8, "name": "茨城県" },
{ "id": 9, "name": "栃木県" },
{ "id": 10, "name": "群馬県" },
{ "id": 47, "name": "沖縄県" }
]
http://www.nxworld.net/tips/jquery-switch-disable-input-button.html