如何通过动态生成的AJAX表修复jQuery分页

问题描述 投票：0回答：1

我正在尝试使用动态表在我的应用程序中实现分页，这是我使用ajax生成的内容：

  function loadWeekData() {

    // Append database data here

     $.ajax({
         type: "GET",
         url: "/Home/JsonWeekEvents",
         dataType: "JSON",
         success: function (result) {
           $.each(result, function (i, val) {
              var trow = $('<tr/>').data("id", val.Id);
               trow.append('<td style="padding:5px; width:auto; height:60px"class="FSE">'+val.FSE+'</td>');
            trow.append('<td class="tdMon" valign="top" style="padding:1px; text-align:center; width:160px; height:100px;background-color:' + val.MonColor + ';">' +
                '<div class="ui-widget" >' +
                '<input type="button" id="dltBtn" class="dltEvent" size="5" value="-" />' +
                '<input  size="7" maxlength="10" id="tagsM" class="tags" />' +
                '<input type="button" id="addBtn" class="addEvent" size="5" value="+" /><br/>' +
                '<div style="text-align:center;" id="monVal" class="desc_NumM">' + val.Monday + '</div >' +
                '<input  type="hidden" class="idEvent" />' + '<input type="hidden"  class="ColorEventM" value="' + val.MonColor+'" />' +
                '</div >' +
                '</td>');
            trow.append('<td valign="top" style="padding:1px;text-align:center; width:160px; height:100px;background-color:' + val.TueColor + ';">' +
                '<div class="ui-widget">' +
                '<input type="button" id="dltBtn" class="dltEvent" size="5" value="-" />' +
                '<input  size="7" maxlength="10" id="tagsT" class="tags" />' +
                '<input type="button" id="addBtn" class="addEvent" size="5" value="+" /><br/>' +
                '<div style="text-align:center;" id="tueVal" class="desc_NumT">' + val.Tuesday + '</div >' +
                '<input type="hidden" class="idEvent" />' + '<input type="hidden"  class="ColorEventT" value="' + val.TueColor +'" />' +
                '</div >' +
                '</td>');
            trow.append('<td valign="top" style="padding:1px;text-align:center; width:160px; height:100px;background-color:' + val.WedColor + ';">' +
                '<div class="ui-widget">' +
                '<input type="button" id="dltBtn" class="dltEvent" size="5" value="-" />' +
                '<input  size="7" maxlength="10" id="tagsW" class="tags" />' +
                '<input type="button" id="addBtn" class="addEvent" size="5" value="+" /><br/>' +
                '<div style="text-align:center;" id="wedVal" class="desc_NumW">' + val.Wednesday + '</div >' +
                '<input type="hidden" class="idEvent" />' + '<input type="hidden"  class="ColorEventW" value="' + val.WedColor +'" />' +
                '</div >' +
                '</td>');
            trow.append('<td valign="top" style="padding:1px;text-align:center; width:160px; height:100px;background-color:' + val.ThurColor + ';">' +
                '<div class="ui-widget">' +
                '<input type="button" id="dltBtn" class="dltEvent" size="5" value="-" />' +
                '<input  size="7" maxlength="10" id="tagsTr" class="tags" />' +
                '<input type="button" id="addBtn" class="addEvent" size="5" value="+" /><br/>' +
                '<div style="text-align:center;" id="thurVal" class="desc_NumTr">' + val.Thursday + '</div >' +
                '<input type="hidden" class="idEvent" />' + '<input type="hidden"  class="ColorEventThr" value="' + val.ThurColor +'" />' +
                '</div >' +
                '</td>');
            trow.append('<td valign="top" style="padding:1px;text-align:center; width:160px; height:100px;background-color:' + val.FriColor + ';">' +
                '<div class="ui-widget">' +
                '<input type="button" id="dltBtn" class="dltEvent" size="5" value="-" />' +
                '<input  size="7" maxlength="10" id="tagsFr" class="tags" />' +
                '<input type="button" id="addBtn" class="addEvent" size="5" value="+" /><br/>' +
                '<div style="text-align:center;" id="friVal" class="desc_NumF">' + val.Friday + '</div >' +
                '<input type="hidden" class="idEvent" />' + '<input type="hidden"  class="ColorEventF" value="' + val.FriColor +'" />' +
                '</div >' +
                '</td>');
            trow.append('<td valign="top" style="padding:1px;text-align:center; width:170px; height:100px;background-color:' + val.SatColor + ';">' +
                '<div class="ui-widget">' +
                '<input type="button" id="dltBtn" class="dltEvent" size="5" value="-" />' +
                '<input  size="7" maxlength="10" id="tagsSt" class="tags" />' +
                '<input type="button" id="addBtn" class="addEvent" size="5" value="+" /><br/>' +
                '<div style="text-align:center;" id="satVal" class="desc_NumSa">' + val.Saturday + '</div >' +
                '<input type="hidden" class="idEvent" />' + '<input type="hidden"  class="ColorEventSa" value="' + val.SatColor +'" />' +
                '</div >' +
                '</td>');
            trow.append('<td valign="top" style="padding:1px;text-align:center; width:160px; height:100px;background-color:' + val.SunColor + ';">' +
                '<div class="ui-widget">' +
                '<input type="button" id="dltBtn" class="dltEvent" size="5" value="-" />' +
                '<input  size="7" maxlength="10" id="tagsSu" class="tags" />' +
                '<input type="button" id="addBtn" class="addEvent" size="5" value="+" /><br/>' +
                '<div style="text-align:center;" id="sunVal" class="desc_NumSu">' + val.Sunday + '</div >' +
                '<input type="hidden" class="idEvent" />' + '<input type="hidden"  class="ColorEventSu" value="' + val.SunColor +'" />' +
                '</div >' +
                '</td>');
            trow.append('<td  style="padding:2px; width:50px; height:70px"><a href="#" rel="events-week-edit" class="edit">Edit Week</a></td>');
            tbody.append(trow);
            tab.append(tbody);

        });

        //$("tr:odd", tab).css('background-color', '#C4C4C4');

        $("#weekEvents").html(tab);
    },
    error: function () {
        alert("Failed! Please try again.");
    }
});

var tab = $('<table class=MyTable border=1 ></table>');
var thead = $('<thead><tr></tr></thead>');

thead.append('<th style="padding:5px">FSE' + "&nbsp;" + '</th>');
thead.append('<th style="padding:5px">Monday' + "&nbsp;" + '</th>');
thead.append('<th style="padding:5px">Tuesday' + "&nbsp;" + '</th>');
thead.append('<th style="padding:5px">Wednesday' + "&nbsp;" + '</th>');
thead.append('<th style="padding:5px">Thursday' + "&nbsp;" + '</th>');
thead.append('<th style="padding:5px">Friday' + "&nbsp;" + '</th>');
thead.append('<th style="padding:5px">Saturday' + "&nbsp;" + '</th>');
thead.append('<th style="padding:5px">Sunday' + "&nbsp;" + '</th>');
tab.append(thead);

var tbody = $('<tbody id="paginate"></tbody>')
}

但是以某种方式我不按行的长度=“ 0”接收任何行

    $(document).ready(function () {

loadWeekData();

var show_per_page = 4;
var number_of_items = $('#paginate tr').length;

//navigation bar
var navigation_html = '<a class="previous_link" href="">Prev</a>' + '&nbsp';
var current_link = 1;
for (var i = 0; i < number_of_items; i = i + show_per_page) {
navigation_html += '<a class="page_link" href="" data-start="' + i + '" data-end="' + (i 
+ show_per_page) + '">' + (current_link) + '</a>' + '&nbsp';
    current_link++;
}
navigation_html += '<a class="next_link" href="">Next</a>';
$('#page_navigation').html(navigation_html);
rowDisplay(0, show_per_page);

//Activating of the first page
function rowDisplay(startIndex, endIndex) {
    $('#paginate tr').hide().slice(startIndex, endIndex).show();
}

//Pagination functionylity
$('.page_link').click(function (e) {
    e.preventDefault();
    $('.active').removeClass('active');
    $(this).addClass('active');
    var IndexData = $(this).data();
    rowDisplay(IndexData.start, IndexData.end);
}).first().addClass('active');

//"Next" & "Previous" functionality
$('.previous_link, .next_link').click(function (e) {
    e.preventDefault();
    var traverse = $(this).is('.previous_link') ? 'prev' : 'next';
    $('.page_link.active')[traverse]('.page_link').click();
});
});

使用HTML生成的简单表，它可以工作并生成页面等，但是由于某种原因，它不能与AJAX表一起使用...

有人可以告诉我我的问题是什么？

jquery ajax asp.net-mvc asp.net-ajax
1个回答
0
投票

已解决：

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.