jquery表格FooTable插件怎么关闭列排序功能啊

Posted 2023-05-13

官方文档写的像屎一样

这个可以参考如下内容:
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);
);
);追问

不是同一个东西参考什么？？？

参考技术A table标签上有一个data-sorting="true"，你看看能不能设置一下追问

改成false没有效果 依旧有排序的

参考技术B data-sort-ignore="true"

jquery 表格控件怎么使用

　　1、使用简单、扩展方便。
　　2、表格样式可自定义，只需修改相应的CSS样式即可。
　　3、支持行点击事件自定义。
　　4、支持复选框选择行。
　　5、执行列排序（支持数字、日期时间、英文、汉字等）。
　　6、支持自定义行按钮及按钮事件（如编辑、删除按钮等）
　　7、支持自定义数据的显示样式（根据当前数据或当前行数据）
　　8、支持分页显示数据，且在插件内部实现分页处理。
　　二、使用说明
　　该插件的使用，基本只需两个步骤即可，一个是表格的声明（创建），然后就是数据的加载。
　　1、表格的声明（创建）
　　var objTable = new HyTable(
　　columns: [
　　name: '姓名', mapping: 'username', type: 'string', width: '100', allowSort: true, renderer: function(val)return val;
　　], //(array)列信息
　　emptyMsg: "暂无数据", //(string)无数据时的提示信息
　　renderTo: "", //(string)表格容器，必须是HTML元素的ID属性值
　　model: 'remote', //(string)模式，远程(remote)or本地(local)
　　url: '', //(string)远程模式的获取数据的url地址
　　allowPaging: true, (bool)//是否分页
　　pageSize: 20, //(int)每页显示的行数
　　checkSelected: false, //(bool)复选框选择
　　selectedField: "", //(string)复选框选中字段
　　stripeRows: false, //(bool)是否启用隔行变色 默认不启用
　　onRowClick: null //(function)行点击事件
　　);
　　2、表格数据的加载
　　objTable.loadData(1,data);//第一个参数为加载页的页索引，第二个参数有两种情况，1：如果参数内容是JSON对象，则表示是查询的查询条件，如果是数据，则表示直接加载本地数据到表格中。 参考技术A $.fn.youfunction = function(event)

参考技术B 看看你用的是什么插件吧，百度一下应该都可以找到这个插件的API文档。或者看看Demo也可以呀！