Datepicker not show when click pagination boostrap table

Question

Я создаю стол для бункера с текстовым ярлыком datebicker.

Этот текстовый ярлык даты, показанный на странице 1, , но у меня есть проблема, когда следующая таблица разбиения на страницы. Этот текстовый ярлык datepicker не отображается, и когда я возвращаюсь на страницу 1 datepicker не отображается. Как я могу исправить эту проблему?

На странице 1

На странице 2

Это мой код.

index.jsp

<div class="row"> 
       <table data-filter-control="true" data-sortable="true" data-url="data.jsp" class="table table-bordered table-striped table-condensed" data-toggle="table" data-search="true" data-pagination="true" id="table"></table> 
         </div> 
function operateFormater(value, row, index) 
    { 
     return ["<input type='text' id='tgl_setor_"+row.id+"' readonly style='background-color:white' onchange='save_data_tgl("+row.id+","+row.no_form_send+")' class='form-control datepicker' />"]; 
    } 


var $table = $('#table'); 
    function initTable(){ 
      $table.bootstrapTable({ 
       columns: [ 
        [ 

         { 
          field : "no_form", 
          title : "No Formulir", 
          width : '3%', 
          sortable : true, 
          align:'center' 
         }, 
         { 
          field : "tgl_setor", 
          title : "Tanggal Setor", 
          width : '3%', 
          sortable : true, 
          formatter: operateFormater 
         } 
        ] 
       ] 
      }); 
     } 


    $table.on('load-success.bs.table', function (d) 
    { 
      $('.datepicker').DatePicker({ 
        orientation: "top", 
        autoclose: true, 
        todayHighlight: true, 
        format: 'yyyy-mm-dd' 
       }); 
    }); 
     initTable(); 

data.jsp

<%@ include file="connect.jsp" %> 
[ 
<% 
    Integer ix = 0; 
    Rs =st.executeQuery("select * from MsFormulir"); 
     while(Rs.next()) 
      { 
      ix++; 
     %> 
    { 
     "ix"   : "<%=ix %>", 
     "no_form": "<%=Rs.getString("NoFormulir")==null?"":Rs.getString("NoFormulir").trim() %><input type=\"hidden\" value=\"<%=Rs.getString("NoFormulir")==null?"":Rs.getString("NoFormulir") %>\" name=\"my_form\" id=\"my_form_<%=ix %>\">", 
     "tgl_setor": "<%=Rs.getString("TglSetor")==null?"":Rs.getString("TglSetor").trim() %>" 
    } 
    <% 
     if(Rs.isLast()==false) 
     { 
    %>  
      , 
    <% } %> 

    <% } %> 
] 

Answer 1

это из-за Bootstrap таблицы повторно сделать вашу таблицу каждый раз, когда вы изменяете страницу. Таким образом, на каждой странице все входы даты. Вы должны инициализировать datepicker в page-change.bs.table обратном вызове события.

$table.on('page-change.bs.table', function (d) 
    { 
      $('.datepicker').DatePicker({ 
        orientation: "top", 
        autoclose: true, 
        todayHighlight: true, 
        format: 'yyyy-mm-dd' 
       }); 
});