DataTable的篩選器屬性不工作時重新加載頁面jQuery的阿賈克斯

**這是正常工作**DataTable的篩選器屬性不工作時重新加載頁面jQuery的阿賈克斯

<div class="col-xs-12"> 

       <div class="col-xs-3"></div> 
       <div class="col-xs-5"> 
        <asp:TextBox ID="txtSearch" class="form-control" placeholdr="Enter the key to search" runat="server"></asp:TextBox> 
       </div> 
       <div class="col-xs-2"> 
        <asp:Button ID="btnSearch" class="btn btn-info btn-flat" data-toggle="popover" data-placement="top" data-content="Please Select a Category" Text="Go" OnClientClick="javascript:return Validation();" runat="server" /> 
        <div id="divMsg" style="display: none;"> 
         <img src="../Images/Preloader_3.gif" width="40" /> 
        </div> 
       </div> 
      </div> 

     </div> 

     <!--Select Book Details | OLM_Se_Book --> 
     <table id="example1" class="table table-responsive" > 

     </table>

阿賈克斯我的aspx代碼

$("[id$=btnSearch]").click(function() { 
       var v = $("[id$=rdSearch]").find("input:checked").length; 
       if (v == 0) { 
        $('[data-toggle="popover"]').popover(); 
        return false; 
       } 
       val = $("[id$=rdSearch]").find("input:checked").val(); 
       val1 = document.getElementById('<%=txtSearch.ClientID%>').value; 
       if (val != "" && val1 != "") { 

        $.ajax({ 
         url: 'Home2.aspx', 
         type: 'GET', 
         data: 'Radio='+encodeURIComponent(val)+'&Txt='+encodeURIComponent(val1), 
         dataType: "html", 
         success: function (response) { 
          $('#example1').html(response); 
          $('#example1').DataTable();// This code work when pages loads but not working when it reloads 
         }, 
         error: function (response) { 
          alert(response.responseText); 

         }, 
         failure: function (response) { 
          // alert(response.responseText); 
         } 
        }); 

       } 


      }); 
     });

DataTable中正常工作對我的第一次點擊但是當再次點擊數據加載正常，但過濾和排序工作不正常。這裏的數據從頁面Home2.aspx加載，所有這一切都很好。請幫忙。

來源

2017-08-01 Jks

當數據表是初始化它創建包裝的div並插入包裝裏面的div你的餐桌。所以當你第二次嘗試初始化數據表時，該表已經在包裝器div中。所以它不能正確初始化。所以你的過濾器工作不正常。 –

@VigneshPandi感謝您的回覆。你能建議它的任何解決方案？ – Jks

使用答案中提到的第二種解決方案 –

如果你的表ID＃示例包裝DIV ID將#example_wrapper。所以爲了這個工作，刪除整個包裝div並再次添加您的表標籤以及響應數據並執行初始化。

$('#example_wrapper').after('<table id="example"></table>'); 
$('#example_wrapper').remove(); 
$('#example').html(response); 
$('#example').DataTable();

或者更好的解決方案將是要在應用響應數據之前使用：

if($('#example').hasClass('dataTable')){ 
    var table=$('#example').DataTable(); 
    table.destroy(); 
} 
    $('#example').html(response); 
    $('#example').DataTable();

來源

2017-08-01 09:50:32

謝謝先生。它的作品是我的願望。非常感謝先生。但是**表格樣式**在重新加載時丟失了。過濾和搜索對我來說是正確的。謝謝你，先生，非常感謝 – Jks

爲了防止表格樣式使用ajax成功的代碼： if（$（'＃example'）。hasClass（'dataTable'））{ var table = $（ '＃例子'）數據表（）; table.destroy（）; } $（'＃example'）。html（response）; $（'＃example'）。DataTable（）; –

$（'＃example1_wrapper'）。（'

'）; $（'＃example1_wrapper'）。remove（）; $（'＃example1'）。html（response）; $（'＃example1'）。DataTable（）;通過添加代碼，我得到我的輸出作爲我的願望。謝謝先生.. – Jks

DataTable的篩選器屬性不工作時重新加載頁面jQuery的阿賈克斯

回答

相關問題