datatables使用总结篇
<!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>
datatables使用总结篇的更多相关文章
- TGL站长关于常见问题的回复
问题地址: http://www.thegrouplet.com/thread-112923-1-1.html 问题: 网站配有太多的模板是否影响网站加载速度 月光答复: wp不需要删除其他的模板,不 ...
- datatables 配套bootstrap样式使用小结（2） ajax篇
距离上一篇有点时间了,周末做了伴郎参加了一个土豪同学的婚礼. 上一篇是介绍一下基本的用法,基本的原理是取出所有的数据,然后调用$.datatables(option)方法格式化,这种方法显然不太科学, ...
- datatables 学习笔记1 基础篇
本文共3部分:基本使用|遇到的问题|属性表 1.DataTables的默认配置 $(document).ready(function() { $('#example').dataTable(); } ...
- ABP框架实践基础篇之开发UI层
返回总目录<一步一步使用ABP框架搭建正式项目系列教程> 说明 其实最开始写的,就是这个ABP框架实践基础篇.在写这篇博客之前,又回头复习了一下ABP框架的理论,如果你还没学习,请查看AB ...
- DataTables 控件使用和心得 (1) - 入门
什么是DataTables DataTables是一个基于HTML/CSS/JavaScript的前端列表组件. 基于JQuery 开源并且免费(除特殊支持服务) 主要特色: 高性能,响应式,功能完整 ...
- datatables.js 简单使用--多选框和服务器端分页
说明:datatables是一款jQuery表格插件.感觉EasyUI的datagrid更易用 内容:多选框和服务器端分页 缘由:写这篇博客的原因是datatables的文档写的不怎么样,找东西很麻烦 ...
- JQuery Datatables(二)
前篇讲到了Datatables的基本用法,链接地址:http://www.cnblogs.com/wumian1360/p/4263129.html 今天来实现5,6,7三点. 其实Datatable ...
- JQuery DataTables Editor---页面内容修改&&数据库信息修改 （1）
我们使用jquery datatables 不光是为了对数据的展示,同时需要对数据惊行简单的操作,这个操作分为两个部分:1.页面内容的修改:2.对应的数据库信息的修改. 前一篇博文介绍了页面级的操作, ...
- DataTables源码分析（一）
DataTables源码分析 写在前面 作为一名常年奋战在java世界中的程序猿,当我接触到现在所谓的前端技术时,内心其实是崩溃的.因为,前端的技术给我的第一个感觉就是"乱",这里 ...
随机推荐
- Application、Session、Cookie、ViewState的特性
http://blog.csdn.net/zyw_anquan/article/details/7664132 Application的特性: 存储的物理位置:服务器端内存. 存储的类型限制:任意 ...
- cf 359A 359B
359A 如果有点在边上则最少两次 没有则最少操作4次 #include <cstdio> #include <cstring> #include <algorithm& ...
- Guava文档翻译之 Service
概览 Guava的接口代表了一个有运行状态的对象,有启动和停止的方法.比如网络服务器,RPC服务器,以及计时器等,都可以实现Service接口.掌管像这样的服务的状态,需要正确地管理启动和关闭,因此会 ...
- jsp自定义标签分析
jsp自定义标签的优势体现在于jsp页面上面减少了java代码. jsp自定义标签有三大部分组成,首先是类继承TagSupport,实现doStartTag方法. public int doStart ...
- Chp11: Sorting and Searching
Common Sorting Algo: Bubble Sort: Runime: O(n2) average and worst case. Memory: O(1). void BubbleSor ...
- POJ 3111
K Best Time Limit: 8000MS Memory Limit: 65536K Total Submissions: 5177 Accepted: 1411 Case Time ...
- ubantu安装jdk来配置hadoop
1.将jdk-7u5-linux-x64.tar.gz拷贝到/usr/lib/jdk/目录下面,这里如果没有jdk文件夹,则创建该文件夹,命令: sudo mkdir jdk //创建文件夹jdk s ...
- Xamarin for Visual Studio 3.11.658 Alpha 版 破解补丁
注意:此版本为 Alpha 版,版本迭代较频繁,仅供尝鲜 前提概要 全新安装请参考 安装 Xamarin for Visual Studio. 最新稳定版请参考 Xamarin for Visual ...
- hdu 1850 Being a Good Boy in Spring Festival 博弈论
求可行的方案数!! 代码如下: #include<stdio.h> ]; int main(){ int n,m; while(scanf("%d",&n)&a ...
- Java中转UTC时间字符串(含有T Z)为local时间
在Java中我们需要转换相应格式的字符串,很多时候我们想到用SimpleDateFormat类来解析.但是最近我在调用一个第三方的接口时返回的 JSON字符串中有个expires字段的值是2014-0 ...