jquery.datatable 初始化时可以在column或者columnDefs中定义render方法, 可以返回自定义的表格单元结构
举个栗子(javascript初始化的数据源):
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="sleest">
<meta name="description" content="datatable example with column render, 2017/08/04">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/datatables/1.10.15/css/jquery.dataTables.min.css">
</head>
<body>
<table id="example" class="display" width="100%"></table>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/datatables/1.10.15/js/jquery.dataTables.min.js"></script>
<script>
+(function($) {
var dataSet = [
["Tiger Nixon", "System Architect", "Edinburgh"],
["Garrett Winters", "Accountant", "Tokyo"],
["Ashton Cox", "Junior Technical Author", "San Francisco"],
["Cedric Kelly", "Senior Javascript Developer", "London"]
]
$(function() {
$('#example').DataTable({
data: dataSet,
columns: [
{ title: "Name", sortable: false, render: function(data, type, row) { return '<a href="###">' + data + '</a>' } },
{ title: "Position", sortable: false },
{ title: "Office", sortable: false },
]
})
})
})(jQuery)
</script>
</body>
</html>
结果:
具体可以参考官方api:
https://datatables.net/examples/advanced_init/column_render.html
这个可以参考如下内容:JQuery.dataTables表格插件添加跳转到指定页
一、解决方案
1.添加自定义工具栏，嵌入文本框
[javascript] view plain copy
"dom": 'l<"toolbar">frtip', //自定义工具栏
[javascript] view plain copy
//设置工具栏内容
//l - length changing input control
//f - filtering input
//t - The table!
//i - Table information summary
//p - pagination control
//r - processing display element
[javascript] view plain copy
$("div.toolbar").html(' <b style="color:red">跳转第</b><input id="searchNumber"/><b style="color:red">页</b>')
2.监听文本框的change事件，执行插件的调转页面方法
[javascript] view plain copy
//调转到指定页面索引 ，注意大小写
var oTable = $('#example1').dataTable()
oTable.fnPageChange(page)
3.插件绘制成功后，绑定文本框的值
[javascript] view plain copy
//绘制的时候触发，绑定文本框的值
table.on('draw.dt', function (e, settings, data) {
var info = table.page.info()
//此处的page为0开始计算
console.info('Showing page: ' + info.page + ' of ' + info.pages)
$('#searchNumber').val(info.page + 1)
})
二、完整示例代码
[html] view plain copy
<table id="example1" class="table table-hover table-striped">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>生日</th>
<th>班级</th>
</tr>
</thead>
</table>
[javascript] view plain copy
$(function () {
//注意方法名为DataTable
var table = $('#example1').DataTable({
"dom": 'l<"toolbar">frtip', //自定义工具栏
"pagingType": "full_numbers",
lengthMenu: [3, 5, 10],
processing: true,//是否使用进度条
serverSide: true,//是否启用数据库加载
ajax: {
url: '/tableone/getlist',
type: 'post',
data: function (d) {
d.name = '张三'
/*
* 自定义aja参数
* 特别说明，此处可以重写控件的默认参数，比如分页参数
*/
// d.start = 0
//console.info(d)
//var page = $('#searchNumber').val()
//page = parseInt(page) || 1
//d.start = (page - 1) * d.length
}
},
//指定列绑定的字段
columns: [
{ data: 'sno' },
{ data: 'sname' },
{ data: 'ssex' },
{ data: 'sbirthday' },
{ data: 'class' }
],
order: [
[3, 'desc']
]
})
$("div.toolbar").html(' <b style="color:red">跳转第</b><input id="searchNumber"/><b style="color:red">页</b>')
//绑定分页事件----在切换分页的时候触发
//table.on('page.dt', function () {
//var info = table.page.info()
//console.info('Showing page: ' + info.page + ' of ' + info.pages)
//})
//绘制的时候触发，绑定文本框的值
table.on('draw.dt', function (e, settings, data) {
var info = table.page.info()
//此处的page为0开始计算
console.info('Showing page: ' + info.page + ' of ' + info.pages)
$('#searchNumber').val(info.page + 1)
})
//监听文本框更改
$('#searchNumber').change(function () {
var page = $(this).val()
page = parseInt(page) || 1
page = page - 1
//调转到指定页面索引 ，注意大小写
var oTable = $('#example1').dataTable()
oTable.fnPageChange(page)
})
})
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）