Плагин для сортировки таблиц Jquery не работает должным образом с AjaxToolkit Accordion

#c# #jquery #accordion #tablesorter #scroller

#c# #jquery #аккордеон #сортировщик таблиц #скроллер

Вопрос:

Я разрабатываю проект веб-формы ASP и испытываю некоторые трудности с плагином для сортировки таблиц jQuery. Я применил плагин к элементу управления ASP Gridview, который находится в Ajax Accordion. Не уверен, в чем проблема, но таблица не отображается полностью при первой загрузке страницы. Ваша помощь и отзывы высоко ценятся

Смотрите рисунок при загрузке первой страницы: Таблица не может загрузиться полностью

Но после каждой обратной отправки или после настройки браузера (минимизации / максимизации) таблица загружается полностью.

смотрите рисунок: Полная таблица

//Js-код для сортировки таблиц

 function BindTablesorter() {
    
$('#gv_MoeglicheEmailverteiler').tablesorter({

        theme: 'jui',
        showProcessing: true,
        headerTemplate: '{content} {icon}',
        stickyHeaders: "tablesorter-stickyHeader",
        resizable: true,

        widgets: ['uitheme','zebra', 'filter', 'scroller'],

        widgetOptions: {
            scroller_upAfterSort: true,
            scroller_jumpToHeader: true,
            scroller_height: 450,
            scroller_fixedColumns: 2,
            scroller_addFixedOverlay: false,
            scroller_rowHighlight: 'hover',
            scroller_barWidth: null
          
        },

    });   

}

$(document).ready(function () {

   BindTablesorter(); 
});
  

// Разметка для Gridview

 <ajaxToolkit:AccordionPane ID="AccPEmailverteiler" runat="server">
  <Header><u>Emailverteiler</u></Header>
    <Content>
       <asp:UpdatePanel ID="up_EmailVerteilerOne" runat="server">
         <ContentTemplate>
           <script type="text/javascript">
           Sys.Application.add_load(BindTablesorter);
           </script>
           <asp:GridView ID="gv_MoeglicheEmailverteiler" runat="server" ClientIDMode="Static" 
           AutoGenerateColumns="false" BorderColor="#DEBA84" BackColor="Silver" HeaderStyle Height="40px" OnPreRender="gv_MoeglicheEmailverteiler_PreRender"             HorizontalAlign="Center" CellPadding="3" CssClass="tablesorter">
<Columns>                
  <asp:TemplateField HeaderText="Reihe" ItemStyle-Width="200px" ItemStyle-HorizontalAlign="Center">   
   <ItemTemplate>
    <%# Container.DataItemIndex   1 %>   
   </ItemTemplate>
  </asp:TemplateField>
  <asp:BoundField DataField="gruppenname" HeaderText="Gruppenname" NullDisplayText="n/a" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" ItemStyle-Width="250px"/>                           
  <asp:BoundField DataField="standort" HeaderText="Standort" NullDisplayText="n/a" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" ItemStyle-Width="250px"/>
  <asp:BoundField DataField="beschreibung" HeaderText="Beschreibung" NullDisplayText="n/a" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" ItemStyle-Width="250px"/>             
  <asp:BoundField DataField="genehmigt" HeaderText="Genehmigt" NullDisplayText="n/a" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" ItemStyle-Width="250px"/>
  <asp:BoundField DataField="zielobjekt" HeaderText="ZielObjekt" NullDisplayText="n/a" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" ItemStyle-Width="250px"/>
  <asp:BoundField DataField="ACTION_CHECKED" HeaderText="Action_Checked" NullDisplayText="n/a" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" ItemStyle-Width="250px" />
  <asp:TemplateField ItemStyle-Width="300px"  HeaderText="Action" ItemStyle-HorizontalAlign="Center">
  <ItemTemplate>
   <asp:CheckBox ID="cb_CheckOneMoglicheverteilerRow" runat="server" ItemStyle-HorizontalAlign="Center" class="checkboxClass" AutoPostBack="true" onclick = "Check_Click(this);" OnCheckedChanged="CheckBox_CheckChanged"/>
  </ItemTemplate>        
  </asp:TemplateField>
</Columns>
<HeaderStyle ForeColor="Black" Font-Bold="True" BackColor="#CCCC00"></HeaderStyle>                       
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</Content>
</ajaxToolkit:AccordionPane>
  

Комментарии:

1. попробуйте с помощью setTimeout(function(){ BindTablesorter(); },1200)

2. Спасибо @Negi, я пытался, но не получил ожидаемого результата. Я думаю, что это связано с виджетами (особенно скроллером) или размером всей таблицы. Потому что, когда я помещаю таблицу за пределы аккордеона, таблица становится такой большой, что она не помещается на странице. я думаю, что аккордеон мешает правильному отображению таблицы, но за пределами аккордеона таблица отображается слишком большой и не помещается на моей странице