Question

我使用textboxt datepicker创建一个boostrap表。

此文本文本日期选择器显示在第1页，但我有一个问题，当下一个分页boostrap表。这个textboxt 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 Table都会重新渲染表格。因此，在每个页面上，datepicker输入都被替换。您应该在page-change.bs.table事件回调中初始化datepicker。

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

单击分页boostrap表时不显示Datepicker

1 个答案: