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 ...
随机推荐
- Python_Selenium2Library源码分析
I. Introduction Selenium2Library是robot framework中主流的测试网页功能的库, 它的本质是对webdriver的二次封装, 以适应robot框架. 百度上一 ...
- asp.net <% = #区别
<% = %>是将网页中定义的变量的值赋给控件: 例如:<input name="T_ClientAdd" type="text" id=&q ...
- Two Pointers - leetcode [两指针问题]
125. Valid Palindrome consider only alphanumeric characters and ignore cases. transform(s.begin(), s ...
- ASP.NET中ListBox控件的使用
文章来源:http://www.cnblogs.com/fengzheng126/archive/2012/04/10/2441551.html ListBox控件属性介绍: SelectIndex: ...
- spring Bean的三种注入方式
1.构造函数注入: 构造函数的注入方式分为很多种 (1)普通构造函数,空参数的构造函数 <bean id="exampleBean" class="examples ...
- 世界之窗(TheWorld)浏览器 3.6.1.0 简体中文绿色版
软件名称: 世界之窗(TheWorld)浏览器 3.6.1.0 简体中文绿色版软件语言: 简体中文授权方式: 免费软件运行环境: Win7 / Vista / Win2003 / WinXP 软件大小 ...
- 面试JS篇
1.闭包 ECMAScript对其进行了简单的描述:允许使用内部函数(即函数定义和函数表达式位于另一个函数的函数体内),而且,这些内部函数可以访问他们所在的外部函数中声明的所有局部变量.参数和声明的其 ...
- 用 Python 脚本实现对 Linux 服务器的网卡流量监控
*这篇文章网上已经有相关代码,为了加深印象,我做了相关批注,希望对朋友们有帮助 工作原理:基于/proc文件系统 Linux 系统为管理员提供了非常好的方法,使其可以在系统运行时更改内核,而不需要重新 ...
- s14 第4天 关于python3.0编码 函数式编程 装饰器 列表生成式 生成器 内置方法
python3 编码默认为unicode,unicode和utf-8都是默认支持中文的. 如果要python3的编码改为utf-8,则或者在一开始就声明全局使用utf-8 #_*_coding:utf ...
- CocoaPods 报错 [!] Error installing JSONModel
pod install p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #34bd26 } span.s1 { } ...