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("&nbsp;&nbsp;&nbsp;&nbsp;");
        //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 () {

时间: 2024-12-29 11:40:09

DataTable Javascript Link not working on 2nd page的相关文章

JavaScript Interview Questions: Event Delegation and This

David Posin helps you land that next programming position by understanding important JavaScript fundamentals. JavaScript is a fun, powerful, and important language with a low barrier of entry. People from all kinds of backgrounds and careers find the

ArcGIS for JavaScript学习(一)

一  API准备 从网上下载开发包:ArcGIS for JavaScript(百度网盘地址) sdk中含有API的帮助和例子 2.离线部署(以IIS为例) 配置IIS(详见网络):解压离线包,包中的install_SDK.html/install_API.html文件含有详细的部署过程. 二 第一个应用程序 使用在线api (1)创建简单的html文档 <!DOCTYPE html> <html> <head> <meta http-equiv="Co

moon 01/14 javascript -- Funtion类型

[javascript 高级程序设计  第5章  page 110]  5.5  Function类型-------函数是对象   函数名是引用/指针: 函数是对象.因此函数名实际上也是一个指向函数对象的指针.不会与某个函数绑定. 每个函数都是Function 类型的实例,与其它引用属性一样具有属性和方法. 创建函数的方法: 1.使用函数声明语法定义的   即使用function定义  函数名是必须的例如 function sum (sum1,sum2 ){ return sum1+sum2;

TP框架中的page分页实现

今天介绍一下如何在tp框架中使用分页功能(TP3.2) 1.第一步,找到我们需要使用的分页类(page.class.php),并将其放在命名空间根目录下的一个位置,比如Library文件夹下或者当前模块下(例如Application  ) 打开分页类,修改命名空间 2.第二步,找到需要分页功能的控制器中相对应的操作方法 public function index(){ $art=M("article"); //分页显示方法 $zts=$art->count(); //查询总条数

page cache 与free

我们经常用free查看服务器的内存使用情况,而free中的输出却有些让人困惑,如下: 先看看各个数字的意义以及如何计算得到: free命令输出的第二行(Mem):这行分别显示了物理内存的总量(total).已使用的 (used).空闲的(free).共享的(shared).buffer(buffer大小). cache(cache的大小)的内存.我们知道Total.free.buffers.cached这几个字段是从/proc/meminfo中获取的,而used = total – free.S

Android:让Link始终保持在程序的WebView中跳转

在Android的WebView中,当点击调用网页的链接时,默认的动作是跳转到系统设定的默认浏览器中.如果想让链接始终在当前WebView中跳转的话,就需要添加以下代码: 1 WebView webView = (WebView) findViewById(R.id.webView1); 2 webView.setWebViewClient(new WebViewClient()); 如果只是想让特定的URL保持在WebView中跳转的话,可以通过重写WebViewClient来实现,示例如下:

JavaScript闭包(二)——作用

一.延迟调用 当在一段代码中使用 setTimeout 时,要将一个函数的引用作为它的第一个参数,而将以毫秒表示的时间值作为第二个参数. 但是,传递函数引用的同时无法为计划执行的函数提供参数.可以在代码中调用另外一个函数,由它返回一个对内部函数的引用,再把这个对内部函数对象的引用传递给 setTimeout 函数.执行这个内部函数时要使用的参数在调用返回它的外部函数时传递. var outer = 'in outter'; setTimeout(function () { echo(pclosu

Oracle Apex 实用笔记系列 4 - 自定义javascript

对于自定义的javascript,有如下几种方式 1. 页面加载 在组件视图 1.点击 编辑page 2.在javascript标签页的Function and global variable declaration处,书写自定义的javascript函数; 3.在Execute when page loads处调用或执行javascript代码 2.Dynamic Action 1.创建一个dynamic action; 2.选择事件类型,比如change, click, page load等

page分页类

<?php /** file: Page.class.php 完美分页类 Page */ class Page { private $total; //数据表中总记录数 private $listRows; //每页显示行数 private $limit; //SQL语句使用limit从句,限制获取记录个数 private $uri; //自动获取url的请求地址 private $pageNum; //总页数 private $page; //当前页 private $config = arr