Blog Template for Bootstrap

datatables

.font-default{
font-family:Helvetica Neue Helvetica Arial ヒラギノ角ゴ Pro W3 Hiragino Kaku Gothic Pro メイリオ Meiryo ＭＳ¥ Ｐゴシック 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>


<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 >

</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