http://datatables.club/blog/2016/01/28/user-share-nbh1991.html
html页面:
<div id="wrapper">
<div >
<div class="row">
<div class="col-lg-12">
</div>
</div>
<div class="form-horizontal" >
<div class="form-group">
<label class="col-sm-1 control-label" >名称:</label>
<div class="col-sm-2" data-column="1">
<input class="form-controlSearch" type="text" id="col1_filter" maxlength="30" placeholder="输入姓名搜索"/>
</div>
<label class="col-sm-1 control-label" >类型:</label>
<div class="col-sm-2" data-column="3">
<select class="form-controlSearch" id="col3_filter">
<option value="">请选择</option>
</select>
</div>
<label class="col-sm-1 control-label">业务类型:</label>
<div class="col-sm-2" data-column="4">
<select class="form-controlSearch" id="col4_filter">
<option value="">请选择</option>
</select>
</div>
<label class="col-sm-1 control-label">签约人姓名:</label>
<div class="col-sm-2" data-column="5">
<input class="form-controlSearch" type="text" id="col5_filter" maxlength="30" placeholder="输入签约人姓名搜索">
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label">公司名称:</label>
<div class="col-sm-2" data-column="6">
<input class="form-controlSearch" type="text" id="col6_filter" maxlength="40" placeholder="输入公司名称搜索">
</div>
<label class="col-sm-1 control-label" >法人姓名:</label>
<div class="col-sm-2" data-column="7">
<input type="text" class="form-controlSearch" id="col7_filter" maxlength="30" placeholder="输入法人姓名搜索"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label"></label>
<div class="col-sm-2">
<%-- <input type="hidden" id="currentNodeCode" name="currentNodeCode" value="${currentNodeCode}"/> --%>
</div>
<label class="col-sm-1 control-label"></label>
<div class="col-sm-2"></div>
<label class="col-sm-1 control-label"></label>
<div class="col-sm-2"></div>
<label class="col-sm-1 control-label"></label>
<div class="col-sm-2">
<button class="btn btn-outline btn-info" style="margin-left:35px;" onclick="search()">搜索</button>
<button class="btn btn-outline btn-success" onclick="clearSearch('form-controlSearch')">重置</button>
</div>
</div>
</div>
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="dataTable_wrapper">
<table class="table table-striped table-bordered table-hover " id="allyTable">
<thead>
<tr>
<th>序号</th>
<th>名称</th>
<th>上级</th>
<th>类型</th>
<th>业务类型</th>
<th>签约人</th>
<th>公司名称</th>
<th>法人姓名</th>
<th>操作人</th>
<th>操作时间</th>
<th>创建时间</th>
<th>id</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
<!-- /#page-wrapper -->
js
$().ready(function() {
// 初始化列表
dataTablesInit(ally);
)}
var ally = {};
ally.property = {
version:"v1.0",
name:"ally",
tableId:"allyTable",
checkAllId:"allyCheckAll",
buttonId:"allyButtonId",
formId:"allyForm",
corporateFormId:"corporateForm",
editFlag:true
};
ally.gridInit = {
bFilter:true,
lengthChange:true,
paging:true,
serverSide:true,
search:true,
processing:true,
scrollY:500,
scrollX:"100%",
scrollXInner:"100%",
scrollCollapse:false,
jQueryUI:false,
autoWidth:true,
autoSearch:false,
aaSorting:[[11, "asc" ]],
Loading:true,
initComplete:function initComplete(){
if(ally.property.buttonId!=""){
$("#"+ally.property.buttonId).append(ally.buttons);
}
if(ally.gridInit.search){
$search = $("input[type='search']");
//隐藏搜索框
$search.parent().hide();
}
$("#"+ally.property.buttonId).attr("align","right");
$("#"+ally.property.buttonId).attr("style","width:80%");
$("#wrapper").hideLoading();
}
};
ally.url="/ally/ally/";
ally.requestUrl = {
queryList:ally.url+"allyList.html",
addData:ally.url+"addAlly.html",
editData:ally.url+"editAlly.html",
queryById:ally.url+"AllyView.html",
fileUpload:ally.url+"fileUpload.html",
querySysLookupByCode:ally.url+"querySysLookupByCode.html",
getEnclosureList:ally.url+"getEnclosureList.html",
fileDelete:ally.url+"fileDelete.html",//删除上传文件
queryAreaString:ally.url+"queryAreaString.html",
queryAllyIdByUuid:ally.url+"queryContractPersonInfo.html"
};
ally.search={
uuid:""
};
ally.status= [
{"searchable": false,"orderable": false,"targets": 0},//第一行不进行排序
{"targets": [11],"visible": false},
{
sDefaultContent : '',
aTargets : [ '_all' ]
}
];
ally.filed =[
//这里的nTd代表的是table的Cell,sData表示的是uuid的值,oData??,iRow为从0开始到9(一页的数据),iCol为0,第一列。
//这里的this其实是指操作的datatable:var table = $('#'+eloancn.tableName).dataTable();
{ "data": "uuid","createdCell": function (nTd, sData, oData, iRow, iCol) {
var startnum=this.api().page()*(this.api().page.info().length);
var number = iRow+1+startnum;
$(nTd).html("<div style='text-align:center'>"+number+"</div>");
},
"bSortable" : false,
"aTargets" : [ 0 ]
},
{"data": "name", "createdCell": function (nTd, sData, oData, iRow, iCol) {
$(nTd).html(commonUtils.subString(sData));
}
},
{"data": "parentName","createdCell": function (nTd, sData, oData, iRow, iCol) {
if(sData==""){
$(nTd).html("北京同城翼龙网络科技有限公司");
}else{
$(nTd).html(sData);
}
}
},
{"data": "allyType","createdCell": function (nTd, sData, oData, iRow, iCol) {
var userName = "";
//翻译借款类型
eloancnCommonJS.sysLookupItemName("ALLY_TYPE",sData,function(data){
$(nTd).html(data);
});
}
},
{"data": "investmentType","createdCell": function (nTd, sData, oData, iRow, iCol) {
var userName = "";
//翻译借款类型
eloancnCommonJS.sysLookupItemName("ALLY_INVESTMENT_TYPE",sData,function(data){
$(nTd).html(data);
});
}
},
// {"data": "status"},
{"data": "contractPerson", "createdCell": function (nTd, sData, oData, iRow, iCol) {
$(nTd).html(commonUtils.subString(sData));
}
},
{"data": "companyName", "createdCell": function (nTd, sData, oData, iRow, iCol) {
$(nTd).html(commonUtils.subString(sData));
}
},
{"data": "legalPerson"},
{"data": "updateUser", "createdCell": function (nTd, sData, oData, iRow, iCol) {
commonUtils.sysUserName(sData,function(data){
$(nTd).html(data);
});
}
},
{"data": "updateTime"},
{"data": "createTime"},
{"data": "id"}
];
ally.buttons = buttonStr;
后台:
// Map<String, Object> param = new HashMap<String, Object>();
// // 排序和搜索
param.putAll(sortAndSearch(request, 14));
// 分页开始
int pageNoInt = Integer.valueOf(request.getParameter("start"));// 起始页
int pageLength = Integer.valueOf(request.getParameter("length"));// 每页显示多少条
processParam4QueryPage(param);
String jsonData = allyService.getPageListAlly(param, pageNoInt == 0 ? 1 : pageNoInt / pageLength + 1,pageLength);
/**
* 列表字段排序
* @param param
* @param request
* @return
* Map<String,Object>
*
*/
protected Map<String,Object> sortAndSearch(HttpServletRequest request,int numberSize){
Map<String, Object> param = new HashMap<String, Object>();
//定义列名
String[] cols = new String[numberSize];
for(int i=0;i<numberSize;i++){
String searchValue = request.getParameter("columns["+i+"][search][value]");
String filed = request.getParameter("columns["+i+"][data]");
if(searchValue!=null &&!searchValue.equals("")){
param.put(filed, searchValue);
}
cols[i] = filed;
}
//获取客户端需要那一列排序
String orderColumn = "0";
orderColumn = request.getParameter("order[0][column]");
orderColumn = cols[Integer.parseInt(orderColumn)];
//获取排序方式 默认为asc
String orderDir = "asc";
orderDir = request.getParameter("order[0][dir]");
//获取用户过滤框里的字符
param.put("orderColumn", orderColumn);
param.put("orderType", orderDir);
return param;
}
相关推荐
男孩的天职datatables入门实战语音视频教程 java使用datatables 1.10.10开发的demo 使用spring mvc+spring+mybatis 有分页,搜索,全选等常用功能 里面有视频教程,包你学会datatables 学完你会,其实都是对js...
工作需要用到jquery dataTables。 网上找不到这样的例子,只好我自已整理一份了。 该demo包含8个可以运行的最简单的个例子。 希望能对大家有帮助。
datatables使用ajax的实例,下载文件,eclipse引入该项目即可运行,看到结果。
ssm整合datatables实例Demo,springMVC spring mybatis datatables
jQuery 的插件 dataTables 是一个优秀的表格插件,提供了...dataTables 的网站上也提供了大量的演示和详细的文档进行说明,但是官网是PHP的例子,特意做了一个asp.net的例子,以Northwind数据库的Customers表为数据源
datatable基本例子都在这里,例子和官网的一一对应,如果访问本地ajax的.tex文件有跨域的话,请移步至我的chrome的ajax跨域问题解决博客
datatables增删改查,行内编辑等官方源码实例 冒泡编辑,多行编辑、删除,例子超多,官方的实现代码非常精简,可直接引用 datatables.dll,减少了非常多的页面脚本 带数据库SQL文件 vs2015工程
datatables 插件
开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery....
jquery datatables前后台数据交互分页实例。
开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min...
datatable 使用示例,简单易学,适合新手入门。前端如何分类、css 编写。
用于dataTables 使用dataTables添加行辅助按钮如 修改/删除.
jquery.datatables,异步请求后台数据时,调用api动态合并行。
解决datatables出现FixedHeader 2 is not supported with DataTables' scrolling mode at this time的问题
开发工具 dataTables.bootstrap开发工具 dataTables.bootstrap开发工具 dataTables.bootstrap开发工具 dataTables.bootstrap开发工具 dataTables.bootstrap开发工具 dataTables.bootstrap开发工具 dataTables....
赠送jar包:datatables-1.9.4.jar; 赠送原API文档:datatables-1.9.4-javadoc.jar; 赠送Maven依赖信息文件:datatables-1.9.4.pom; 包含翻译后的API文档:datatables-1.9.4-javadoc-API文档-中文(简体)版.zip; ...
jquery datatables离线参考
python中用django框架做的一个简单的入门实例-对用户信息的增删改