码迷,mamicode.com
首页 > 编程语言 > 详细

DataTable Javascript Link not working on 2nd page

时间:2016-11-10 07:43:00      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:div   move   alert   auto   proc   delegate   roc   bsp   nbsp   

$(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 () {

DataTable Javascript Link not working on 2nd page

标签:div   move   alert   auto   proc   delegate   roc   bsp   nbsp   

原文地址:http://www.cnblogs.com/MiaBlog/p/6049502.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!