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

如何在jquery中对基于Datatable的字符串数组进行排序?

在jQuery中对基于Datatable的字符串数组进行排序,可以使用Datatable的order()方法来实现。该方法可以根据指定的列进行排序。

首先,确保你已经引入了jQuery和Datatable的相关库文件。然后,按照以下步骤进行操作:

  1. 创建一个空的HTML表格,并为其添加一个唯一的ID,例如myTable
代码语言:txt
复制
<table id="myTable"></table>
  1. 使用jQuery的DataTable()方法初始化Datatable,并指定需要排序的列。
代码语言:txt
复制
$(document).ready(function() {
    $('#myTable').DataTable({
        "columns": [
            null, // 第一列
            null, // 第二列
            null  // 其他列...
        ]
    });
});
  1. 在需要排序的列上添加点击事件,以触发排序操作。
代码语言:txt
复制
$(document).ready(function() {
    $('#myTable').DataTable({
        "columns": [
            null, // 第一列
            { "orderable": true }, // 第二列
            null  // 其他列...
        ]
    });
    
    $('#myTable').on('click', 'th', function() {
        var columnIndex = $(this).index();
        $('#myTable').DataTable().order([columnIndex, 'asc']).draw();
    });
});

在上述代码中,我们将第二列设置为可排序的列,其他列默认不可排序。当点击表头时,获取点击的列索引,然后使用order()方法对表格进行排序,并使用draw()方法重新绘制表格。

这样,基于Datatable的字符串数组就可以在jQuery中进行排序了。

注意:以上代码仅为示例,实际应用中可能需要根据具体情况进行适当调整。

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

相关·内容

使用 Python 对波形中的数组进行排序

在本文中,我们将学习一个 python 程序来对波形中的数组进行排序。 假设我们采用了一个未排序的输入数组。我们现在将对波形中的输入数组进行排序。...− 创建一个函数,通过接受输入数组和数组长度作为参数来对波形中的数组进行排序。 使用 sort() 函数(按升序/降序对列表进行排序)按升序对输入数组进行排序。...例 以下程序使用 python 内置 sort() 函数对波形中的输入数组进行排序 − # creating a function to sort the array in waveform by accepting...在这里,给定的数组是使用排序函数排序的,该函数通常具有 O(NlogN) 时间复杂度。 如果应用了 O(nLogn) 排序算法,如合并排序、堆排序等,则上述方法具有 O(nLogn) 时间复杂度。...结论 在本文中,我们学习了如何使用两种不同的方法对给定的波形阵列进行排序。与第一种方法相比,O(log N)时间复杂度降低的新逻辑是我们用来降低时间复杂度的逻辑。

6.9K50

dataTable参数说明

Number /Array false destroy 设为ture时通知dataTable函数完全重新建立一个新的控件实例,在一个页面内反复对同一个控件加载dataTable函数并且想重新建立控件时使用...Boolean false orderClasses 定义是否排序的列进行高亮显示 Boolean true order 定义列表的初始排序设定,为一个2维数组...Boolean true orderFixed 自定义固定的排序策略,该策略在任何排序操作中总是起效.可以通过对一个列的固定排序(可以是隐藏的列)来定义列表默认的排序策略....数组方式,定义优先排序策略,如: "orderFixed": [ 0, 'asc' ] 该参数说明无论如何排序,永远先进行第一列的正向排序....仅仅能在控件初始化的时候对控件进行控制和影响,如果要在控件使用过程中对它进行控制和变化,就需要用到DataTables的函数库(API).

4.6K20
  • datatables应用程序接口API

    ) Datatables有一个强大的api,用来处理表格上的数据,你可以添加数据到已经存在的表格,或者对已经存在的数据进行操作。...API旨在能够很好地操作表格中的数据。...(没理解) filter()DT 从结果集中过滤 flatten()DT 把一列或者几列数据从二维数组变成一维数组 indexOf()DT 从结果集中找匹配的值,返回找到个数 iterator()DT...遍历表格、列,行,单元格结果集 join()DT 给结果集数据以字符连接然后返回一个字符串 lastIndexOf()DT 返回与字符相匹配第一次出现的位置(从后往前) lengthDT 返回结果集的长度...sort()DT 对结果集进行排序 splice()DT 对结果集进行分割 to$()DT 转为jquery实例 toArray()DT 把结果集转换为javascript数组 toJQuery()DT

    4.5K30

    datatables使用教程

    原理介绍 对table进行渲染,前提table的数据源得有,如上面的是HTML页面本来就有一定的数据了,所以可以直接调用函数进行渲染; 但是在大多数情况下,项目开发并不会采用这种做法,而是要结合服务端,...做法有很多,可以ajax异步拿到数据后,进行dom操作,把数据填入table中,在进行datatables.ajax.reload() 这样当然可以,但是代码很乱,难看。...,//用来描述数据在加载中等待的提示字符串 - 当异步读取数据的时候显示 "processing": "处理中..."...,//用来描述数据在加载中等待的提示字符串 - 当异步读取数据的时候显示 "processing": "处理中..."...用来描述分页长度选项的字符串 "loadingRecords": "加载中..."

    7.2K20

    jquery datatable 参数

    以下是在进行dataTable绑定处理时候可以附加的参数: 属性名称 取值范围 解释 bAutoWidth true or false, default true 是否自动计算表格各列宽度 bDeferRender...这个数据是记录在cookies中的,打开了这个记录后,即使刷新一次页面,或重新打开浏览器,之前的状态都是保存下来的 sScrollX 'disabled' or  '100%' 类似的字符串 是否开启水平滚动...[int,string], 如[], [[0,'asc'], [0,'desc']] 指定按多列数据排序的依据 aaSortingFixed 同上 同上。...唯一不同点是不能被用户的自定义配置冲突 aLengthMenu default [10, 25, 50, 100],可以为一维数组,也可为二维数组,比如:[[10, 25, 50, -1], [10,...中的字符串的前缀名字 sDom default lfrtip (when bJQueryUI is false) or t (when bJQueryUI is true)

    25610

    jquery.datatables 分页功能

    在后端不管是使用什么技术,按下面API中的参数封装对象即可,分页,排序,搜索都不需要手动去维护这些信息,方便、方便、太方便!...} order[i]和columns[i]被发送到服务器的参数的信息数组: order[i] - 是一个定义有多少列的数组 - 即如果数组长度为1,则执行单列排序,否则正在执行多列排序。...columns[i] - 定义表中所有列的数组。 在这两种情况下,i都是一个整数,它将改变以指示数组值。在大多数现代化的服务器端脚本环境中,这些数据将作为数组自动提供给您。...在上面的例子中,我们使用它作为一个字符串,它指示DataTables使用其默认设置进行Ajax请求。但是,您可以通过ajax作为对象传入来自定义这些设置。...'/data-source', type: 'POST' } } ); 有关DataTable中可用的Ajax选项的更多信息,请参阅ajax文档。

    5K20

    Jquery DataTable 的学习之基础配置(二)

    2017-01-12 03:19:31 本文将介绍jquery DataTable的一些基础配置,如分页、排序、过滤等,代码如下 $(document).ready(function() { $('...}); } ); 1.1分页功能 当开启分页功能后,jquery DataTable将会在页面上将表格进行分页处理,此分页的方式与后台无关,只需要在初始化之前将数据填充到表格当中,然后进行表格初始化操作...1.3过滤功能 过滤功能也可以叫做为搜索查询功能,该功能在大数据量的表格中作用尤为突出,当数据量很大时,用户不想通过翻页的方式来逐条搜索,通过后台搜索查询的方式又很慢,这时就显示出了该功能的优越性。...代码如下 "aoColumns": [ { "bSortable": true }, null, null, null, { "bSortable": false } ], 通过对每列进行设置,需要进行排序的设置为...1.5页脚信息 填入页脚信息会在表格最下方显示一个文字信息,来对表格进行描述说明等。 1.6自动宽度 插件会根据表格内容对宽度进行自动处理

    1.2K10

    Datatables表格插件,你用过吗?

    Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。...分页,即时搜索和排序 几乎支持任何数据源:DOM, javascript, Ajax 和 服务器处理 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation...,我们操作这一列不需要有排序功能,所以可以禁止掉,索引是从0开始的。...这时候就有一个问题了,后台分页时如何知道你按多少数据分页的,你的排序方式是按哪个字段进行什么排序的。...在ajax请求中利用data属性动态实时获取用户输入的数据,并把其赋值给dataTable,然后doSearch方法中重新拉起一次dataTable请求,这时请求参数就添加了需要的字段和值; <form

    6K30

    一文入门Python的Datatable操作

    通过本文的介绍,你将学习到如何在大型数据集中使用 datatable 包进行数据处理,特别在数据量特别大的时候你可以发现它可能比 Pandas 更加强大。...对象中,datatable 的基本分析单位是 Frame,这与Pandas DataFrame 或 SQL table 的概念是相同的:即数据以行和列的二维数组排列展示。...注意:这里用颜色来指代数据的类型,其中红色表示字符串,绿色表示整型,而蓝色代表浮点型。...▌帧排序 datatable 排序 在 datatable 中通过特定的列来对帧进行排序操作,如下所示: %%timedatatable_df.sort('funded_amnt_inv')_____...下面来看看如何在 datatable 和 Pandas 中,通过对 grade 分组来得到 funded_amout 列的均值: datatable 分组 %%timefor i in range(100

    7.7K50

    Python的Datatable包怎么用?

    通过本文的介绍,你将学习到如何在大型数据集中使用 datatable 包进行数据处理,特别在数据量特别大的时候你可以发现它可能比 Pandas 更加强大。...Frame 对象中,datatable 的基本分析单位是 Frame,这与Pandas DataFrame 或 SQL table 的概念是相同的:即数据以行和列的二维数组排列展示。...注意:这里用颜色来指代数据的类型,其中红色表示字符串,绿色表示整型,而蓝色代表浮点型。...▌帧排序 datatable 排序 在 datatable 中通过特定的列来对帧进行排序操作,如下所示: %%time datatable_df.sort('funded_amnt_inv') ___...下面来看看如何在 datatable 和 Pandas 中,通过对 grade 分组来得到 funded_amout 列的均值: datatable 分组 %%time for i in range(100

    7.2K10

    Python的Datatable包怎么用?

    通过本文的介绍,你将学习到如何在大型数据集中使用 datatable 包进行数据处理,特别在数据量特别大的时候你可以发现它可能比 Pandas 更加强大。...对象中,datatable 的基本分析单位是 Frame,这与Pandas DataFrame 或 SQL table 的概念是相同的:即数据以行和列的二维数组排列展示。...注意:这里用颜色来指代数据的类型,其中红色表示字符串,绿色表示整型,而蓝色代表浮点型。...▌帧排序 datatable 排序 在 datatable 中通过特定的列来对帧进行排序操作,如下所示: %%timedatatable_df.sort('funded_amnt_inv')_____...下面来看看如何在 datatable 和 Pandas 中,通过对 grade 分组来得到 funded_amout 列的均值: datatable 分组 %%timefor i in range(100

    6.7K30

    Gulp构建实例

    gulp $ npm install gulp -g 进入到需要 gulp 管理的项目路径,如 /gulp 再安装一遍 $ npm install gulp --save-dev 安装 gulp 插件...modernizr.custom.js 用途:提供过渡动画支持 jQuery 组件 jquery.bootstrap.wizard.js 用途:基于 jQuery 的 Bootstrap 向导式插件...jquery.dataTables.js 用途:表格处理插件,包括排序分页,宽度自动处理 用法:引入后,以下结构绘制表格 例: daterange-picker.js 用途:基于 bootstrapt...的日期范围选择器 modernizr.custom.js 用途:提供过渡动画支持 jQuery 组件 jquery.bootstrap.wizard.js 用途:基于 jQuery 的 Bootstrap...maxlength:5 输入长度最多是5的字符串(汉字算一个字符) (13)minlength:10 输入长度最小是10的字符串(汉字算一个字符

    1.8K40

    【初学者指南】在ASP.NET MVC 5中创建GridView

    介绍 在这篇文章中,我们将会学习如何在 ASP.NET MVC 中创建一个 gridview,就像 ASP.NET Web 表单中的 gridview 一样。...服务器端和客户端有许多可用的第三方库,这些库能够提供所有必需的功能,如 Web 表格中的搜索、排序和分页等。是否包含这些功能,取决于应用的特殊需求,例如在客户端和服务器端提供搜索或其它功能的需求等。...例如: DOM JavaScript的 Ajax Server-side processing 我最喜欢的选项之一是, jQuery 数据表不但支持客户端搜索、分页、排序等,而且还提供了一个可以在服务器端处理的选项...为了做到这一点,请打开 web.config 并为数据库提供连接字符串。在配置文件中,你会发现下面配置节点中的连接字符串,你需要在节点中根据你的系统来修改连接字符串。...在下一篇文章中,我们将会学习到如何通过使用服务器端分页、排序和过滤来使页面呈现的更好。对于具有大量的数据时,这是一个更好的方法。

    6.2K90

    【整理】待毕业.Net码农就业求职储备

    因为如果在一趟排序中没有发生元素交换,那么数组中的数据都已经有序了,这时就无需再继续比较了,这也是冒泡排序算法结束的条件。   ...(4)测试结果    ①这里首先使用一个包含10000个(本来想再对10万个,100万个进行测试,但是太懒了,所以...)随机数的int数组简单进行了五次测试,平均耗时每次812ms。...它的基本思想是:通过一趟排序将要排序的数据分割成独立的两部分,其中一部分的所有数据都比另外一部分的所有数据都要小,然后再按此方法对这两部分数据分别进行快速排序,整个排序过程可以递归进行,以此达到整个数据变成有序序列...②同样,这里再使用一个包含10000个有序数据的int数组进行五次测试,发现平均耗时为343ms。这里也可以跟冒泡排序在此种情形下的耗时进行对比,发现快排在接近有序的情景时弱爆了。 ?   ...(Connection、Command、Adapter等)实现对指定数据库表的访问,并将其取出放到DataTable中,再根据指定格式输出到页面中。

    68930

    C#二十七 Dataset和DataAdapter

    DataSet是ADO.NET中最核心的成员之一,是各种基于.NET平台程序语言(如VB.NET、C#.NET、C++.NET)的数据库应用程序开发最常接触的类,这是因为DataSet在ADO.NET实现从数据库中抽取数据的作用...Column Name)、数据格(Item),以及约束(Constraint)和有关DataTable对象中数据的关系(Relations)与数据显示排序(DataView)信息组成。...DataView用来在观察数据时提供排序和过滤的功能。DataColumn用来对表中的数据值进行一定的规限。比如哪一列数据的默认值是什么、哪一列数据值的范围是什么、哪个是主键、数据值是否是只读等。...ParentRelations表是父表,childRelations是子表,子表是对父表的引用,这样就使得一个表中的某行与另一个表中的某一行甚至整个表相关联。...< dv.Table.Columns.Count; i++) { Response.Write(rowview[i] + " "); } } (3)对结果集过滤排序

    8210

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

    JS插件类型 插件名 描写叙述 Jquery 引入版本号jquery-1.8.3 Easyui 引入版本号jquery.easyui.1.3.1及自己定义扩展JS DatePicker 引入版本号My97DatePicker4.8...Beta2 Jqueryui 引入版本号jquery-ui-1.9.2 prohibit 经常使用浏览器操作JS函数如禁用右键菜单,禁用回退。...以适应父容器 否 true sortName string 定义的列进行排序 否 null sortOrder string 定义列的排序顺序,仅仅能是“递增“或“降序(asc,desc) 否 asc...showRefresh boolean 是否显示刷新button 否 true showText boolean 是否显示分页文本内容 否 true style string 插件类型有easyui和datatable2...field 获取全部选定行传入字段的数组集合 name+search 无 运行查询前提是Column列query设为true 2.1.4.

    4.5K20

    基于RequireJS和JQuery的模块化编程——常见问题解析

    因此,如果已经习惯了异步编程,并且希望有完善的文档推荐使用requirejs;如果是想对执行顺序有特殊要求,又方便开发,那么也可以使用seajs。...关于循环依赖的源码可以参考云盘 如何在requirejs中使用jquery 如果想要使用jquery比较简单,直接在main.js中添加对应的依赖即可: requirejs.config({ baseUrl...$('#test').html('test'); }); 如何在requirejs中使用jquery插件 对于jquery的插件,比较常见的做法都是传入一个jquery的对象,在这个jquery对象的基础上添加插件对应的方法...比如,你的模块在加载后,对页面的某个元素$('#test')绑定了click事件。但是使用了某个UI插件,这个插件会重新渲染DOM元素,test对应的click事件就失效了。...比如在DOM重构的JS模块中,执行渲染的代码下面: require("xxx").initEvents(); 常见场景: 比如我在页面中使用了jquery-steps这个UI插件,它会对页面进行重新渲染

    3K100

    列举一下项目中使用的产品和技术

    ORM听的最多的是Java里面的Hibernate,和.NET里面的NHibernate。PetaPoco对SQL Server,MySQL和Oracle支持的都很不错。...想定制的,或者写自己公司的内部视图引擎的都可以直接看源代码。不过MVC可以进行TDD的,实际开发中没有去做,而已白盒测试非常少。充分发挥MVC3.0的功能还需要进一步提升。...同时常见的功能可以封装成jQuery插件,以便后期的项目复用和维护。当然对jQuery的版本有一些限制,本次项目就有因为jQuery版本和jQuery UI版本之间的不兼容,出现了一下bug。...jQuery dataTable 项目中用到列表非常的多,在web forms时代基本都是用GridView等列表控件。...在MVC中,这些基本都不用或者不能用,所以对数据列表的呈现需要有一个好的插件进行支持。dataTable在分页,样式自定义和排序方面做的都不错。

    1.1K100

    datatables 配套bootstrap3样式使用小结(1)

    js有4个,①jquery,②bootstrap3,③datatables的js,④datatables对应bootstrap样式时用的。 为了说明问题,就不放bundle里面了。...({ //lengthMenu: [5, 10, 20, 30],//这里也可以设置分页,但是不能设置具体内容,只能是一维或二维数组的方式,所以推荐下面language里面的写法...四个编号上的内容都是可以通过传入datatable()方法控制的。其中要注意,方法名是dataTable而不是DataTable,后者用于api的操作。...编号②中的搜索框是输入内容后自动搜索表格上的所有列(当然可以通过他的api来实现搜索特定的列,比如某些隐藏列的筛选)。 图如下: ? 通过以上4个控制,基本可以满足大部分table列表的需求。...这样的table属于一次性加载完所有数据,然后再调用js格式化。 晚上再写用ajax异步加载数据datatable。

    2.5K20
    领券