datatables使用総括編
109356 ワード
<!doctype html>
<html>
<head>
<meta charset="gbk"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" ,Chrome=1">
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<!--boostrap-->
<link href="<?php echo base_url(); ?>static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="<?php echo base_url(); ?>static/bootstrap/js/jquery.min1.9.1.js"></script>
<script src="<?php echo base_url(); ?>static/bootstrap/js/bootstrap.min.js"></script>
<script src="<?php echo base_url(); ?>static/datatables/jquery.dataTables.min.js"></script>
<link href="<?php echo base_url(); ?>static/datatables/dataTables.bootstrap.css" rel="stylesheet">
<script src="<?php echo base_url(); ?>static/datatables/dataTables.bootstrap.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lte IE 9]>
<script src="<?php echo base_url(); ?>static/iejs/respond.min.js"></script>
<script src="<?php echo base_url(); ?>static/iejs/html5shiv.min.js"></script>
<![endif]-->
<link href="<?php echo base_url(); ?>static/mycss/mycss.css" rel="stylesheet">
<link href="<?php echo base_url(); ?>static/mycss/admins.css" rel="stylesheet">
<title> </title>
</head>
<body>
<div class="container">
<!--<div class="row">
<div>
<ul class="nav nav-tabs">
<li class="active"></li>
</ul>
</div>
</div>-->
<div class="row">
<div class="panel panel-info">
<div class="panel-heading"><h3 class="panel-title"> </h3></div>
<div class="panel-body">
<form class="form-inline" role="form">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" name="works" id="works_all" value="works_all">
</label>
<label class="btn btn-default">
<input type="radio" name="works" value="zs" id="works_zs">
</label>
<label class="btn btn-default">
<input type="radio" name="works" value="sr" id="works_sr">
</label>
<label class="btn btn-default">
<input type="radio" name="works" value="jh" id="works_jh">
</label>
<label class="btn btn-default">
<input type="radio" name="works" value="gs" id="works_gs">
</label>
<label class="btn btn-default">
<input type="radio" name="works" value="ms" id="works_ms">
</label>
<label class="btn btn-default">
<input type="radio" name="works" value="tm" id="works_tm">
</label>
<label class="btn btn-default">
<input type="radio" name="works" value="yl" id="works_yl">
</label>
<label class="btn btn-default">
<input type="radio" name="works" value="ykt" id="works_ykt">
</label>
</div>
<div class="form-group">
<label for="condition"> :</label>
<select name="condition" id="condition" class="form-control">
<option value=""> </option>
<option value="order_num"> </option>
<option value="dinghuo_tel"> </option>
<option value="dinghuo"> </option>
<option value="order_time"> </option>
<option value="fahuo_time"> </option>
<option value="wuliu_num"> </option>
</select>
</div>
<div class="form-group">
<input type="text" class="form-control" id="condition_val" name="condition_val">
</div>
<div class="form-group">
<button type="button" id="btn_search" class="btn btn-primary" data-loading-text=" ......">
</button>
</div>
</form>
</div>
</div>
</div>
<div class="row">
<div id="alert_dialog"></div>
</div>
<!--class="table table-striped table-bordered table-hover table-full-width" -->
<div class="row">
<!--
<button class="btn btn-default" id="visible"> </button>
<button class="btn btn-default" id="get_checkbox"> </button>
<button class="btn btn-default" id="get_checkbox"> </button>-->
<button class="btn btn-default" id="delete_order"> </button>
<button class="btn btn-default" id="page_fresh"> </button>
</div>
<br>
<div class="row">
<table id="example" class="table table-striped table-bordered" cellpadding="0" border="0" cellspacing="0"
width="100%">
<thead>
<tr>
<th><input type="checkbox" id="checkAll"></th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
</tfoot>
</table>
</div>
<!-- （Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!--<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×
</button>
<h4 class="modal-title" id="myModalLabel">
（Modal）
</h4>
</div>-->
<div class="modal-body">
</div>
<div class="modal-footer text-center">
<button type="button" class="btn btn-default" id="yes_delete" data-dismiss="modal">
</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- （Modal） -->
<div class="modal fade" id="check_data" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body text-center">
<h4> </h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>
<script type="text/javascript" src="<?php echo base_url(); ?>static/datatables/jquery.jeditable.mini.js"></script>
<script type="text/javascript">
$(document).ready(function () {
datatable = $('#example').DataTable({
"processing": true,
"bSort": false,
"serverSide": true,
"ajax": {
"type": "post",
"url": "<?php echo site_url();?>/admins/adminindex/get_datatable_data",
// "url": "http://datatables.net/examples/server_side/scripts/jsonp.php",
"dataType": "json"
},
"columnDefs": [
{
targets: 0,
"render": function (data, type, rowdata, meta) {
return "<input type=\"checkbox\" name='order_checkbox' class='order_checkbox' value=" + data + '|' + rowdata.shouhuo_tel + ">";
}
},
{
targets: 7,
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
$(nTd).addClass('inputTd').attr('id', oData.id + '_' + oData.shouhuo_tel);
}
}
],
"columns": [
{"data": "id", "orderable": false},
{"data": "order_num", width: '60px', "orderable": false},
{"data": "dinghuo", width: '60px'},
{"data": "shouhuo", width: '60px'},
{"data": "dinghuo_tel", width: '60px'},
{"data": "shouhuo_tel", width: '60px'},
{"data": "shangpin", width: '200px'},
{"data": "work", width: '40px'},
{"data": "songhuo_addr"}
],
//
"fnCreatedRow": function (nRow, aData, iDataIndex) {
//add selected class
//console.info(nRow);
$(nRow).click(function () {
if ($(this).hasClass('row_selected')) {
$(this).removeClass('row_selected');
} else {
$('tr.row_selected').removeClass('row_selected');
//$(this).addClass('row_selected');
}
});
},
//
"language": {
"processing": " ...",
"lengthMenu": " _MENU_ ",
"zeroRecords": " ",
"info": " _START_ _END_ ， _TOTAL_ ",
"infoEmpty": " 0 0 ， 0 ",
"infoFiltered": "( _MAX_ )",
"infoPostFix": "",
"search": " :",
"url": "",
"paginate": {
"first": " ",
"previous": " ",
"next": " ",
"slast": " "
}
},
initComplete: function () {
var api = this.api();
var columns_indexes = api.columns().indexes().flatten();
api.columns().indexes().flatten().each(function (i) {
var column = api.column(i);
// console.info(column.header());
// console.info(column);
});
},
"fnDrawCallback": function (data, x) {
$('#example tbody td.inputTd').editable("<?php echo site_url();?>/admins/adminindex/edit_order", {
indicator: '<img src="<?php echo base_url();?>/static/images/loading.gif">',
tooltip: ' ',
//onblur : 'ignore',
callback: function (value, settings) {
if(value=='ok'){
datatable_fresh();
}else {
alert(' ');
}
},
submit: '<span style="cursor: pointer"> </span>'
});
}
});
//xhr http://datatables.net/reference/event/xhr
datatable.on('xhr.dt', function (e, settings, json) {
// console.info(json);
});
// ajax.url
/*datatable.ajax.url("http://datatables.net/examples/server_side/scripts/jsonp.php").load();
datatable.ajax.dataType ="jsonp";*/
//
$('#example tbody').on('click', 'tr', function () {
var name = $('td', this).eq(0).text();
var index = $(this).context._DT_RowIndex; //
// console.info($(this).context);
//
//console.info(datatable.row(this).data());
//alert(' ' + name + ' ' + index);
});
//
//alert($(".btn-group label.active input").val());
$("#btn_search").click(function () {
var works = $(".btn-group label.active input").val();
var condition = $("#condition").val();
var condition_val = $("#condition_val").val();
if (!condition && condition_val) {
alert(" ");
return false;
}
var jsons = {"works": works, "condition": condition, "condition_val": condition_val};
//datatable.settings()[0].ajax.data={"name":"hubing"};
datatable.settings().context[0].ajax.data = jsons;
datatable.on(
'xhr.dt', function (e, settings, json) {
if (json.data[0]) {
//alert('ok');
} else {
//alert('nook');
}
//
$("#btn_search").button('reset');
}
).ajax.url("<?php echo site_url();?>/admins/adminindex/get_datatable_data").load();
$(this).button('loading').delay(1000).queue(function () {
$(this).button('reset');
});
});
});
//
$("#visible").on('click', function (e) {
e.preventDefault();
var column = datatable.column(8);
column.visible(!column.visible());
});
//
$("#delete_order").on('click', function (e) {
e.preventDefault();
var gc = get_checkbox();
if (gc) {
$('#myModal').modal('show');
gc = JSON.stringify(gc);
$('#yes_delete').unbind("click").on('click', function () {
$.post('<?php echo site_url();?>/admins/adminindex/delete_order', {"delete_order": gc}, function (back) {
if(back) {
$('#alert_dialog').html("<div class='alert alert-info'><a href='#' class='close' data-dismiss='alert'>×</a><strong>"+back+" ！</strong></div>");
}else {
$('#alert_dialog').html("<div class='alert alert-warning'><a href='#' class='close' data-dismiss='alert'>×</a><strong>！</strong> 。</div>");
}
datatable_fresh();
});
})
}
});
$("#get_checkbox").on('click', function (e) {
e.preventDefault();
var gc = get_checkbox();
alert(gc);
});
//
function get_checkbox() {
var checkbox = new Array();
$("input[name='order_checkbox']").each(function () {
if (this.checked) {
checkbox.push($(this).val());
}
});
if (!checkbox[0]) {
//alert(' ');
$('#check_data').modal('show');
return false;
} else {
return checkbox;
}
//console.info(checkbox);
}
//
$("#checkAll").click(function () {
if (this.checked) {
$("input[name='order_checkbox']").each(function () {
this.checked = true;
});
} else {
$("input[name='order_checkbox']").each(function () {
this.checked = false;
});
}
}
);
//
$("#page_fresh").click(function () {
datatable_fresh();
});
//
function datatable_fresh() {
datatable.ajax.reload(null, false);
}
</script>
</body>
<style type="text/css">
.row_selected {
background: red;
}
</style>
</html>