DataTable Javascript Link not working on 2nd page
$(document).ready(function () {
var otable = $('#tbl-resources').dataTable(
{
bJQueryUI: false, bFilter: true, bPaginate: true, bSort: false, bInfo: true,
"oLanguage": { "sSearch": "Click on column to sort / Search all columns for:" }
, "sPaginationType": "simple_numbers", "bAutoWidth": false,
"sDom": '<"row view-filter" <"col-sm-6"<"#ddl-category">><"col-sm-6"<"pull-right"f>>>t<"row view-pager"<"col-sm-7"<"pull-left"l><"pull-right"i>><"col-sm-5"<"pull-right"p>>>',
"aoColumns": [
null,
null,
null,
{ "width": "40%" }
],
"buttons": [
{
extend: 'collection',
text: 'Select Resource Category',
"fnClick": function (nButton, oConfig, oFlash) {
alert('Mouse click');
}
}
]
});
$label = $('<label/>').text('Resource Category:').appendTo('#ddl-category')
$label.append(" ");
//insert the select and some options
$select = $('<select/>', { 'class': 'form-control' }).appendTo('#ddl-category')
@foreach (var item in Model.ResourceCategories)
{
<Text>
$('<option/>').val('@item.Value').text('@item.Text').appendTo($select);
</Text>
}
otable.$(".editResource").on('click', function () {
var category = $('#ddl-category :selected').val();
alert(category);
var overridden = $(this).data('overridden');
var resourceId = $(this).attr('data-resourceId');
$.ajax({
url: '@Url.Action("EditResource", "Correspondent")',
type: "POST",
data: { selectedId: resourceId, selectedCategory: category, IsOverriddenResource: overridden },
}).success(function (result) {
$('#div-edit-modal').html(result);
$('#edit-modal').modal('show');
});
});
});
My last column in Datatable is link, but only work on the first page, whenever I changed the page number or number shown on page the links were not working.
Solution: Delegated events have the advantage that they can process events from
descendant elements that are added to the document at a later time. By
picking an element that is guaranteed to be present at the time the
delegated event handler is attached, you can use delegated events to
avoid the need to frequently attach and remove event handlers.
So, instead of using
$(".editResource").click(function () {
need to use dataTables.$() which is
otable.$('.editResource').on('click', function () {
DataTable Javascript Link not working on 2nd page的更多相关文章
- SharePoint 2013 中使用 JavaScript Like 和Unlike list item/page/document
SharePoint 2013中新增了很多社交功能,比如用户可以like/unlike 任何一个 list item/page/document,这是一个非常不错的功能. 但有时觉得like/unli ...
- [Javascript] Link to Other Objects through the JavaScript Prototype Chain
Objects have the ability to use data and methods that other objects contain, as long as it lives on ...
- Print a PeopleSoft Page with JavaScript
1. You will need a Long character field to hold the HTML string. You can use the delivered field HT ...
- 自己动手用Javascript写一个无刷新分页控件
.NET技术交流群:337901356 ,欢迎您的加入! 对 于一个用户体验好的网站来说,无刷新技术是很重要的,无刷新,顾名思义,就是局部刷新数据,有用过Asp.net Web Form技术开发网页的 ...
- javascript,HTML,PHP,ASP做301跳转代码 SEO优化设置
URL HTTP Redirection URL http redirection is an automatic URL change operation from one URL to anoth ...
- Fancytree Javascript Tree TreeTable 树介绍和使用
Fancytree是一个非常棒的Javascript控件,功能强大,文档健全.在做Javascript Tree控件选型时,主要基于以下几点选择了Fancytree 在Javascript Tree控 ...
- javascript项目实战---ajax实现无刷新分页
分页: limit 偏移量,长度; limit 0,7; 第一页 limit 7,7; 第二页 limit 14,7; 第三页 每页信息条数:7 信息总条数:select count(*) from ...
- Javascript Madness: Mouse Events
http://unixpapa.com/js/mouse.html Javascript Madness: Mouse Events Jan WolterAug 12, 2011 Note: I ha ...
- 【网页开发学习】Coursera课程《面向 Web 开发者的 HTML、CSS 与 Javascript》Week1课堂笔记
Coursera课程<面向 Web 开发者的 HTML.CSS 与 Javascript> Johns Hopkins University Yaakov Chaikin Week1 In ...
随机推荐
- android移动开发学习笔记(二)神奇的Web API
本次分两个大方向去讲解Web Api,1.如何实现Web Api?2.如何Android端如何调用Web Api?对于Web Api是什么?有什么优缺点?为什么用WebApi而不用Webservice ...
- HTTPClient网络异常:java.lang.IllegalStateException: Content has been consumed
在对代码进行重构时候,出现了一个异常,代码的网络请求使用的是HTTPClient: 但是其实代码中没有添加什么,只是添加了两句log: 后来发现是因为将EntityUtils.toString()方法 ...
- python pandas 数据处理
pandas是基于numpy包扩展而来的,因而numpy的绝大多数方法在pandas中都能适用. pandas中我们要熟悉两个数据结构Series 和DataFrame Series是类似于数组的对象 ...
- 拓展自定义编辑器窗口(EditorGUILayout类)
Unity支持自行创建窗口,也支持自定义窗口布局.在Project视图中创建一个Editor文件夹,在文件夹中再创建一条脚本. 自定义窗口需要让脚本继承EditorWindow再设置MenuItem, ...
- javsscript总结
- CentOS7 citus9.5 集群安装及管理
1 所有节点配置 #------服务安装 服务yum update -y #------扩展依赖安装yum install -y epel-release && yum update ...
- 一.Maven的安装和配置整理
Maven的安装和配置 1.1安装 进入Maven官网的下载页面:http://maven.apache.org/download.cgi选择当前最新版本:" ...
- MongoDB本地安装与启用(windows )
MongoDB的安装与MongoDB服务配置 Mongo DB 是目前在IT行业非常流行的一种非关系型数据库(NoSql),其灵活的数据存储方式备受当前IT从业人员的青睐.Mongo DB很好的实现了 ...
- notepad++正则表达式替换字符串详解
正则表达式是一个查询的字符串,它包含一般的字符和一些特殊的字符,特殊字符可以扩展查找字符串的能力,正则表达式在查找和替换字符串的作用不可忽视,它 能很好提高工作效率. EditPlus的查找,替换,文 ...
- cuckoo数据库变更
1.cuckoo版本升级 cuckoo默认的数据库为sqlite,默认连接方式为sqlite:///os.path.join(REPORT_ROOT, "db", "cu ...