首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用checkbox - datatable js更改默认顺序列

是指在使用datatable.js插件时,通过checkbox来选择行,并且可以更改默认的排序列。

datatable.js是一款功能强大的JavaScript表格插件,可以实现表格的排序、搜索、分页等功能。在使用datatable.js时,默认情况下,点击表头可以对该列进行排序。但是有时候我们希望通过checkbox来选择行,并且可以更改默认的排序列。

为了实现这个功能,我们可以按照以下步骤进行操作:

  1. 引入datatable.js插件和相关的样式文件。
代码语言:html
复制
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
  1. 创建一个HTML表格,并添加checkbox列。
代码语言:html
复制
<table id="myTable">
  <thead>
    <tr>
      <th></th> <!-- checkbox列 -->
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox"></td>
      <td>数据1</td>
      <td>数据2</td>
      <td>数据3</td>
    </tr>
    <!-- 其他行数据 -->
  </tbody>
</table>
  1. 初始化datatable.js,并设置checkbox列为不可排序。
代码语言:javascript
复制
$(document).ready(function() {
  $('#myTable').DataTable({
    columnDefs: [{
      orderable: false, targets: 0 // checkbox列不可排序
    }]
  });
});

通过以上步骤,我们可以实现使用checkbox来选择行,并且checkbox列不参与排序。这样用户可以通过选择checkbox来操作行,而不会影响表格的排序功能。

推荐的腾讯云相关产品:腾讯云对象存储(COS)。

腾讯云对象存储(COS)是一种高可用、高可靠、强安全的云存储服务,适用于存储和处理各种类型的非结构化数据,如图片、音视频、文档等。它提供了简单易用的API接口,方便开发者进行文件的上传、下载、管理等操作。

产品介绍链接地址:腾讯云对象存储(COS)

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

DjangoWeb使用Datatable进行后端分页的实现

使用场景:不使用Django的模版语言进行分页(网上大多数都使用该方式),使用Jquery DataTable.js 插件进行分页处理。...代码如下: 1.Html页面内容(本人用的是Admin.lte的前端框架), 引入Datatable css 和 Js,并创建一个table: <link rel="stylesheet" href="...) ) 注意,我这里的<em>datatable</em>分页<em>使用</em>的是post请求, 因为分页的时候需要向服务端传递很多参数,<em>使用</em>get请求的话,这里就很难受了。...但是<em>使用</em>了get方式后,在某页进行操作再进行上面的<em>JS</em>刷新时会出现行序号紊乱或者分页信息被重置的问题。 这也是我碰到的一个坑。 特此记录一下。...以上这篇DjangoWeb<em>使用</em><em>Datatable</em>进行后端分页的实现就是小编分享给大家的全部内容了,希望能给大家一个参考。

4.9K20

ADO.NET 2.0 中的新增 DataSet 功能

二进制序列化选择 在加载带有大量数据的 DataTable 方面的重大性能改进不要求我们对现有的 ADO.NET 1.x 代码进行任何更改。...在 ADO.NET 1.x 中,DataSet 序列化为 XML(甚至在使用二进制格式化程序时也是如此)。...为了保持向后兼容性(ADO.NET 团队总是关注这一点),XML 序列化的默认值将为我们提供与 ADO.NET 1.x 中相同的行为。...如果 PreserveChanges 保留它的默认值 false,则合并操作会重写原始 DataTable 中的行的原始值和当前值,并且所作的所有更改都将丢失。...在将数据加载到 DataTable 中时,DataAdapter 的 Fill 方法的默认行为是将所有行标记为“未更改”(这可以通过将 AcceptChangesOnFill 属性设置为 False 来重写

3.2K100

使用 CSS Checkbox Hack 技术制作一个手风琴组件

在本篇文章里,我们一起学习下如何使用 CSS checkbox hack 技巧制作一个响应式的手风琴组件,这个组件完全基于CSS,没有JavaScript脚本,基于窗口大小进行水平和垂直之间进行切换。...然后我们创建相应的单选按钮,并为其分配内容关键词: 建立无序列表 接下来,我们设置一个包含4行的无序列表,每行列表包含了标题项标签和内容项标签: 首先我们在标题选型卡外层定义标签...,其它选项卡隐藏,这里我们先让所有的选项卡默认隐藏,后面我们会使用 Checkbox Hack 让选中的选项卡内容处于展示状态。...首先我们需要更改序列表让其为纵向分布,flex-direction: column;然后更改选型卡的标题区域布局为横向分布,flex-direction: row,示意代码如下: 5、处理内容有限的情况...,不用写一行JS代码,是不是觉得CSS很神奇呢,在接下来的文章,我将会给大家继续分享 CSS checkbox hack 的案例,敬请期待。

5.3K30

UI标签库的话题:JEECG智能开发平台 BaseTag(样式表和JS标签的引入)

Beta2 Jqueryui 引入版本号jquery-ui-1.9.2 prohibit 经常使用浏览器操作JS函数如禁用右键菜单,禁用回退。...禁用F5 designer 在线流程设计器函数库 tools artDialog4.1.6弹出窗及经常使用CURD操作函数 ckeditor 在须要载入t:ckeditor时引入ckeditor所须要的...參数 属性名 类型 描写叙述 是否必须 默认值 name string 表格唯一标示 是 null treegrid boolean 是否是树形列表 否 false autoLoadData boolean...或者说主键字段 否 null width num 表格宽度 否 auto height num 表格高度 否 auto checkbox boolean 是否显示复选框 否 false fit boolean...showRefresh boolean 是否显示刷新button 否 true showText boolean 是否显示分页文本内容 否 true style string 插件类型有easyui和datatable2

4.4K20

html基础

:可以给type属性:circle square desc默认,分别是不同的行头符号形状 12.ol 有序列表:可以给type属性:a A 1 i I等,分别设置不同的行头序列号 13.li...后以键值对形式拼接 大小受限制 不安全 效率较高 浏览器默认(百度) post : 相对安全 大小没限制 请求体重 4.enctype 如果表单中存在文件上传,需要更改...文件上传 submit 提交按钮 value属性的值修改submit按钮的显示 button 普通按钮 常结合js一起使用 reset 重置按钮,恢复默认值 fieldset...选区 select 下拉框 option 下拉列表选项 textarea 多行文本域 label 定义 常用的几个属性: name:一般表单元素 id:唯一的 常结合js使用 class...:可重读 可以给多个值 结合css 表单元素的常用属性: name 给个名字 value 默认值 placeholder 提示字 checked 单选|多选--默认选择 disabled

2.1K30

02-Epicor二次开发常用代码

XML,供设计水晶报表的数据源(在[管理分析-SD(C)-库存管理-快递对账单]中可以参考) 5、将UtraGriew的数据Excel导出 6、系统的常量标志符:vbCrLf等 7、循环表格,并将当中的CheckBox...、ST的数据源 24、点击查询设备、资源、物料等适配器获取值的方式 25、清空UltraGrid的数据行 26、标准方法修改表的值(有出现当前行已经被修改时的错误) 26、获取DT里面的值 27、移除DataTable...K:\MIS-Epicor系统\ERP Group\客制资料\Epicor字段使用\Epicor字段使用一览表.xls 3、Form_Load事件中常见的代码(格式化、初始化等) 1、禁止Form工具栏的新建...7、循环表格,并将当中的CheckBox全选、或全取消 8、EPICOR数据字典 在【系统管理-系统维护-数字字典浏览器】可以看到 9、更改菜单的名称 这里只是改中文的,但是如果是更改英文的话,...“眼镜”查询加载数据 25、清空UltraGrid的数据行 26、标准方法修改表的值(有出现当前行已经被修改时的错误) 26、获取DT里面的值 27、移除DataTable的行数据 28、

2K10

Flutte部件目录-Material Components 顶

底部导航栏通常与Scaffold结合使用,在Scaffold.bottomNavigationBar参数中提供它。 底部导航栏的type会更改其条目的显示方式。...如果选择的项目非空,则使用fixedColor呈现所选项目,否则将使用主题的ThemeData.primaryColor。...导航栏的背景色是默认的材质背景色ThemeData.canvasColor(实质上是不透明的白色)。 BottomNavigationBarType.shifting,有四个或更多项目时的默认值。...Checkbox 复选框允许用户从一组中选择多个选项。 Checkbox部件实现了这个组件 ? Radio 单选按钮允许用户从一组中选择一个选项。...DataTable 数据表显示一组原始数据。 它们通常出现在桌面企业产品中。 DataTable小部件实现了这个组件。 ? Card 材料设计卡片。 卡片有稍微圆角和阴影。 ?

9.4K40

Newtonsoft.Json

开发过程中通常会使用Json进行数据交互,C#语言中会使用到Newtonsoft.Json.dll 这个类库,这个类库是开源类库,虽然类库非微软官方,但是被广泛使用; 源码地址:https://github.com...转Json 示例: 代码略,方法一样的,把DataTable传入至 JsonConvert.SerializeObject(DataTable tb) C#对象转换Json时的一些高级(特殊)设置 前面这些比较常用的方法...Json,如果这个属性不需要转换成Json,需要标记JsonIgnore】 转换后的Josn { ” Name“:”张三十“, ” Hobby“:["音乐","跑步","看电影"] } 序列化时更改...(重命名)属性名称 需求分析:有时候实体类中定义的属性名称可能不是想要的名称,但是又不能更改实体类中属性的名称,这个时候就可以自定义序列化字段名称。...方法来有条件地序列化属性,要有条件地序列化属性,需要在对象类中增加一个与该属性同名的布尔值的方法,然后使用ShouldSerialize作为方法名称的前缀,比如你要设置属性字段Name根据条件来动态决定是否序列

2.4K80
领券