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基础知识学习_Day3
一.字典用法 字典是一种key-value数据类型,通过key获取具体value的内容,字典的特性是无序.去重. 增删改查用法如下: 1.1基本增删改查操作 name = {"," ...
- 利用rabbit_mq队列消息实现对一组主机进行命令下发
目的: 利用rabbit_mq队列消息实现对一组主机进行命令下发 server: #!/usr/bin/env python3.5 # -*- coding:utf8 -*- import os,sy ...
- DUIlib使用Fastreport--报表简单使用
fastreport是一个简单优秀的报表,fastreport更多是和delphi联合使用预览和打印数据的.我在开始使用duilib做项目时,打印和数据预览都是自己绘制的,这样不仅绘制麻烦费事费事,而 ...
- 一个3D视频播放器的演示APK
介绍: 这个APK是把视频显示分割成左右对等的两幅画面.同时无缝显示在屏幕上, 配合类似谷歌的cartdboard "纸片壳" 或市面上的魔镜等3D眼镜来播放视频画面, 根据3D眼 ...
- 如何在 Linux 中找出最近或今天被修改的文件
1. 使用 ls 命令,只列出你的 home 文件夹中今天的文件. ls -al --time-style=+%D | grep `date +%D` 其中: -a- 列出所有文件,包括隐藏文件 -l ...
- Python基础(十)-模块
模块初识 一般把不同功能代码放到不同py文件,一个py文件就是一个模块 三种模块库: 1.Python标准库 2.第三方库 3.自定义库 导入模块:import 库名 (Python解释器只认识执行文 ...
- VC6.0 通过崩溃地址中找到异常代码行
来源:http://blog.csdn.net/mydeardingxiaoli/article/details/20371585 这是从“VC编程经验总结7”中转出来的借花献佛——如何通过崩溃地址找 ...
- 私有云Mariadb集群搭建
MariaDB作为Mysql的一个分支,在开源项目中已经广泛使用,例如大热的openstack,所以,为了保证服务的高可用性, 同时提高系统的负载能力,集群部署是必不可少的. MariaDB Gale ...
- mysql无法输入中文
#查看系统的环境变量 echo $LANG zh_CN.UTF-8 vim /etc/sysconfig/i18n 1 LANG="en_US.UTF-8"2 SYSFONT=&q ...
- JPA 系列教程20-JPA2.0-@CollectionTable
@CollectionTable 指定集合表的详细信息,如果是JPA1.0必须再写一个Pojo类 ddl语句 CREATE TABLE `t_employee` ( `id` bigint(20) N ...