首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >控制何时在dataTables中的serverSide处理中填充thead和tbody

控制何时在dataTables中的serverSide处理中填充thead和tbody
EN

Stack Overflow用户
提问于 2011-06-21 14:07:54
回答 1查看 637关注 0票数 1

我正在使用DataTables插件通过ajax调用来获取和分页我的表。我的要求是,我只需要对我获取的内容进行排序,即在服务器端获取时进行客户端排序。

为了实现这一点,我使用了tablesorter和dataTables插件。我的代码看起来像这样-

代码语言:javascript
运行
AI代码解释
复制
$("#ProposalSearchResults").html('<table cellpadding="0" id="proposalsTable" cellspacing="0" border="1 px" class="dataTable tablesorter">');
        $("#proposalsTable").tablesorter();
        $("#proposalsTable").dataTable({
            "bPaginate": true,
            "bJQueryUI": true,
            "bLengthChange": false,
            "bFilter": false,
            "bSort": false,
            "bInfo": true,
            "bAutoWidth": false,
            "bServerSide":true,
            "iDisplayLength": 10,
            "bProcessing": true,
            "sPaginationType": "full_numbers",
            "aoColumns": [
                            {"sTitle" : "Proposal Id"},
                            {"sTitle" : "Release Candidate Id"},
                            {"sTitle" : "Proposal Description"},
                            {"sTitle" : "Application"},
                            {"sTitle" : "Requester"},
                            {"sTitle" : "Proposal Status"},
                            {"sTitle" : "Proposal Creation Date", "sType": "full_date" },
                            {"sTitle" : "Proposal Planned Deployment Date", "sType": "full_date" },
                            {"sTitle" : "Action"}
                        ],
            "sAjaxSource": "/searchProposals",
            "fnServerData": function(sSource, aoData, fnCallback){
                aoData.push({"name" : "searchCriteria", "value" : JSON.stringify(proposalSearchCriteria)});

                $.ajax({
                    "dataType": "json",
                    "type" : "GET",
                    "url" : sSource,
                    "data" : aoData,
                    "success" : function (serviceOutput){
                        fnCallback(serviceOutput.ret);
                        $("#proposalsTable").trigger("update");
                    }
                });
           }
        });

现在这里的问题是,因为在开始时,表的头和tbody没有形成,所以对tablesorter()的调用返回和客户端排序没有实现。但是,当我先创建and和tbody,然后通过ajax填充它时,它是有效的。我不能解码dataTables的代码,所以不知道哪个方法实际在表中绘制/写入这些too和表头,它可以被重写,以便在其中也有对tablesorter的调用。

有人能帮帮我吗。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2011-06-21 15:13:28

您应该在调用dataTables()之后调用$("#proposalsTable").tablesorter();。通过这种方式,datatables创建了<thead>和所有<th>部分(所有正确的标记等等),您可以在其上附加表排序事件。如果您这样做,则没有可附加事件的<th>,因此tablesorter()将失败。请记住,您只能将事件附加到DOM中已经存在的元素(好的,有一些方法也可以附加到DOM准备就绪后添加的元素,如jQuery live(),但我不认为tablesorter会使用它们),在您的情况下,datatables为表创建标记。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/6426645

复制
相关文章
编程篇(006)-请写出以下代码的执行结果
(function() { fn(); var fn = function() { alert(1); } fn(); function fn() { alert(2) } })() 参考答案: 第一次弹出2,第二次弹出1 解析: // 变量提升之后的代码: (function() { function fn() { alert(2) } var fn; fn(); // 弹出2
齐丶先丶森
2022/05/12
2650
编程篇(007)-请写出以下代码的执行结果
以上两个例子中,除了var aValue = e;这一句位置不同:例1位于外层匿名函数中、例2位于内层匿名函数中,其他部分完全相同。为什么结果不同?
齐丶先丶森
2022/05/12
3280
hibernate for循环执行添加操作出错问题
hibernate插入对象的时候,对于id唯一,数据库设置为自增的时候执行完操作后会将id赋予该对象
陈灬大灬海
2018/09/12
8130
hibernate for循环执行添加操作出错问题
Oracle——无法在查询中执行 DML 操作
create or replace function test_f(id varchar2) return varchar2 is Result varchar2(100); begin insert into sfcs_temp_17109 (sn)values(id);
_一级菜鸟
2019/09/10
4.4K0
Oracle——无法在查询中执行 DML 操作
Oracle中执行truncate操作出现hang
同事说某套Oracle中有一张94G容量的表需要清空,用delete删除的,但是一直卡着。
bisal
2021/11/08
6880
JS动态添加表单
<script type=”text/javascript”> function addRow()<!–js实现添加一行内容!–> { var tr=document.createElement(“tr”); var td=document.createElement(“td”); var input=document.createElement(“input”); input.setAttribute(“type”,”file”); input.setAttribute(“name”,”image[]”)
苦咖啡
2018/05/07
14.2K0
oracle 添加执行上一条指令 安装rlwrap
https://linux.linuxidc.com/index.php?folder=cHViLzIwMTEvMDcvMDQvcmx3cmFw rpm -ivh http://mirror.cent
用户5760343
2022/05/20
3930
Oracle 利用执行计划来避免排序操作
在Oracle中,利用index来避免排序 SQL> CREATE TABLE T_NOSORT (ID NUMBER PRIMARY KEY, NAME VARCHAR2(30) NOT NULL); SQL> CREATE INDEX IND_T_NOSORT_NAME ON T_NOSORT(NAME); SQL> INSERT INTO T_NOSORT SELECT ROWNUM, TABLE_NAME FROM USER_TABLES; SQL> COMMIT; SQL> SET AUTOT O
星哥玩云
2022/08/17
3430
Oracle中对临时表空间执行shrink操作
《Oracle一个诡异的临时表空间不足的问题》中提到对临时表空间执行shrink space的操作,以前一直理解只有对表能做shrink space的操作,但从官方文档看,11g开始,就可以对临时表空间执行相同的操作。
bisal
2022/09/19
5730
Oracle中对临时表空间执行shrink操作
《Oracle一个诡异的临时表空间不足的问题》中提到对临时表空间执行shrink space的操作,以前一直理解只有对表能做shrink space的操作,但从官方文档看,11g开始,就可以对临时表空间执行相同的操作。
bisal
2022/09/19
4920
14表单操作
表单操作 获取表单 获取表单元素 通过常规方式 Document对象方式。document.getElementById('form')等。 通过Document的属性forms ``document.forms` 返回结果为HTMLCollection。 通过表单的name名字。 此方法不推荐。因为在新版本的浏览器中可能不再支持。 如果返回结果为一个时类型为对象,多个时是集合。 获取表单组件元素 常规方式 Document对象方式。document.getElementById('form_input
Dreamy.TZK
2020/05/15
3860
ElementUI动态添加表单项
chao超的搬运文章
2023/10/15
3310
Hplus框架动态添加选项卡功能(扩展)
hplus框架确实是后端开发人员的福音,但是有很多功能没有实现,我根据网上大神的做法,实现了动态添加选项卡来打开新页面的功能。
别团等shy哥发育
2023/02/25
7770
Hplus框架动态添加选项卡功能(扩展)
WPF实现选项卡效果(3)——自定义动态添加的AvalonDock选项卡内容
  在前面一篇文章里面,我们实现了AvalonDock选项卡的动态添加,但是对于选项卡里面的内容,我们并没有实现任何有用的功能。   这篇文章里面,我们将实现对选项卡里面的内容和功能实现自定义。 完整系列   ● 第一部分   ● 第二部分   ● 第三部分 在Git中下载工程源码
全栈程序员站长
2022/09/13
1.7K0
WPF实现选项卡效果(3)——自定义动态添加的AvalonDock选项卡内容
JQuery表格表单操作
1、多选框应用代码示例 <form action=”#” method=”post”> 你喜欢的明星是?<br /> <input type=”checkbox” name=”boxs” value=”张嘉译” id=”1″ /><label for=”1″>张嘉译</label> <input type=”checkbox” name=”boxs” value=”周润发” id=”2″ /><label for=”2″>周润发</label> <input type=”checkbox” name=”bo
苦咖啡
2018/05/07
1.6K0
jquery 操作表单表格
$("tr:contains('王五')").addClass("selected")
用户5760343
2019/10/08
1.6K0
jquery 操作表单表格
oracle添加not null约束
大家好,又见面了,我是你们的朋友全栈君。在创建表时,为列添加not null约束,形式如下: column_name data_type [constraint constraint_name] not null 其中,constraint constraint_name 表示为约束指定名称。 也可以为已创建的表中添加not null约束,这时就需要使用alter table… modify语句,形式如下: alter table table_name modify column_name [constraint constraint_name] not null;
全栈程序员站长
2022/09/06
8130
用 PyQt 打造具有专业外观的 GUI
如果您一直在创建表单以执行将数据输入数据库等操作,那么QFormLayout适合您。此类将小部件布置为两列布局。第一列通常显示描述预期输入的标签,第二列通常包含允许用户输入或编辑数据的输入小部件,例如QLineEdit,QComboBox或QSpinBox。
sergiojune
2021/07/19
2.9K0
用 PyQt 打造具有专业外观的 GUI
Contact Form 7插件添加表单教程
作为一个网站所有者,你绝对应该学习如何添加一个联系表单到WordPress。你的网站不是一个匿名实体。大多数人都想知道,偶尔也会和他们所读内容背后的人互动。你认为为什么会有作者简介和博客评论?今天外贸
Hoan外贸建站
2020/12/03
1.9K0
dreamweaver添加表单_dreamweaver网页制作代码
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/169646.html原文链接:https://javaforall.cn
全栈程序员站长
2022/09/22
1.8K0
dreamweaver添加表单_dreamweaver网页制作代码

相似问题

如何构造Python包(?)要向各个模块添加文件,请执行以下操作

13

要向选项卡添加更具描述性/更有意义的id名称,请执行以下操作

22

要添加文件,请执行以下操作

10

Jquery:如果选中单选按钮A,请执行以下操作。如果检查B,请执行以下操作

27

若要在表中添加列表项,请执行以下操作

20
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档