javascript - 单击分页 Bootstrap 表时不显示日期选择器

Question

我用文本框日期选择器创建了一个 boostrap 表。

此文本框日期选择器显示在第 1 页， 但我有一个问题，当下一个分页 boostrap 表时。 此文本框日期选择器未显示，当我返回第 1 页时 日期选择器不显示。我该如何解决这个问题？

第 1 页

第 2 页

这是我的代码。

索引.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();

数据.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 Table 会在您每次更改页面时重新呈现您的表格。所以在每一页上，日期选择器输入都被替换了。 您应该在 page-change.bs.table 事件回调中初始化日期选择器。

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