jquery - 使用jsp模板时，引导分页器不起作用

Question

我正在使用 jsp 模板开发一个 Web 应用程序。我的整个 jsp 包含在脚本标记中，如下所示。

    <script type="text/html" id="foundation-template">
    <%
        String viewPath = "/MyImage/view/refactored";
    %>

<div class="tab-pane" id="tab2">
<div class="row-fluid">
<div class="span12">
<div class="span3 filtermenu">
    <h3>Filter Foundation</h3>
    &nbsp;
        <label>Foundation Name</label>
        <input type="text" id="searchFoundationName"/>
        <label>Contact Person name:</label>
        <select id="searchContactName" data-bind="options: $root.contactPersonsList"></select>
         <label>Status:</label>
        <select id="searchStatus">
            <option value="-1">Select One</option>
            <option value="0">Active</option>
            <option value="1">Inactive</option>
        </select>

        <hr>
        <a href="#" class="btn btn-info pull-right" data-bind="event:{click: onFilterSearch}" id="onFilterSearch">Filter Foundation list</a>
</div>
<div class="span9 panelpadding">
<div>
    <div class="pull-left">
        <h1>Foundation List</h1>
    </div>
    <div class="pull-right">
        <br />
        <a class="btn btn-info pull-right" href="#" data-toggle="modal" data-bind="event: {click: onClickCreateFoundation}">Create Foundation Master</a>
    </div>
</div>
<!-- Fondation Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
    <h3 id="myModalLabel">Foundation Master</h3>
  </div>
  <div class="modal-body">

    <form class="form form-skin" id="foundationForm">
    <div class="row-fluid">
        <div class="span12 panelpadding">
            <div class="span6">
                <div class="control-group">
                    <label class="control-label">Foundation name</label>
                    <div class="control-group">
                        <input type="hidden" id="foundationId"/> 
                        <input type="text" value="" name="foundationName" id="foundationName"/>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">Country</label>
                    <div class="control-group">
                        <select id="founationCountryId" name="countryIdentifier" data-bind="options: $root.countryList, optionsText: 'countryName', 
                                optionsValue: 'countryIdentifier', value: $root.countrySelected, event: {change: onCountryChanged}"></select>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">State</label>
                    <div class="control-group">
                        <select id="founationStateId" name="stateIdentifier" data-bind="options: $root.stateList, optionsText: 'stateName', 
                                optionsValue: 'stateIdentifier', value: $root.stateSelected, event: {change: onStateChanged}"></select>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">County</label>
                    <div class="control-group">
                        <select id="founationCountyId" name="countyIdentifier" data-bind="options: $root.countyList, optionsText: 'countyName', 
                                optionsValue: 'countyIdentifier', value: $root.countySelected, event: {change: onCountyChanged}"></select>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">City</label>
                    <div class="control-group">
                        <select id="founationCityId" name="cityIdentifier" data-bind="options: $root.cityList, optionsText: 'cityName', 
                                optionsValue: 'cityIdentifier', value: $root.citySelected"></select>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">Status</label>
                    <div class="control-group">
                    <select name="foundationStatus" id="foundationStatus">
                        <option value="-1">Select One</option>
                        <option value="0">Active</option>
                        <option value="1">Inactive</option>
                    </select>
                    </div>
                </div>

            </div>
            <div class="span6">
                <div class="control-group">
                    <label class="control-label">Phone</label>
                    <div class="control-group">
                        <input type="text" value="" name="phone" id="phone"/>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">E Mail</label>
                    <div class="control-group">
                        <input type="email" value="" name="emailId" id="emailId" />
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">Website</label>
                    <div class="control-group">
                        <input type="text" value="" name="website" id="website"/>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">ContactPerson/Manager</label>
                    <div class="control-group">
                        <input type="text" value="" name="contactPerson" id="contactPerson"/>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">ContactPersonPhone</label>
                    <div class="control-group">
                        <input type="text" value="" name="contactPersonPhone" id="contactPersonPhone"/>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">ContactPersonEmail</label>
                    <div class="control-group">
                        <input type="text" name="contactPersonEmail" value="" id="contactPersonEmail"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </form>

  </div>
  <div class="modal-footer">
        <div id="createDiv">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <a href="#" class="btn" id="resetbtn" data-bind="event:{click: resetForm}">Reset</a>&nbsp;&nbsp;<button class="btn btn-primary" data-bind="click: foundationSubmit">Save</button>
        </div>
        <div id="updateDiv">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            &nbsp;&nbsp;<button class="btn btn-primary" data-bind="click: foundationSubmit">Update</button>
        </div>

  </div>
</div>

<!-- Modal End-->
<div class="clearfix"></div>
<!-- Fondation View Modal -->
<div class="modal fade" id="viewFoundation" tabindex="-1" role="dialog" aria-labelledby="viewModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="viewModalLabel">View Foundation</h4>
      </div>
      <div class="modal-body">
        <div class="row-fluid">
        <div class="span12 panelpadding">
            <div class="span6">
                <div class="control-group">
                    <label class="control-label">Foundation name :&nbsp;<span id="viewFoundationName"/></label>
                </div>
                <div class="control-group">
                    <label class="control-label" style="white-space:nowrap;">Country :&nbsp;<span id="viewfoundationCountryName"/></label>
                </div>
                <div class="control-group">
                    <label class="control-label" style="white-space:nowrap;">State :&nbsp;<span id="viewfoundationStateName"/></label>
                </div>
                <div class="control-group">
                    <label class="control-label" style="white-space:nowrap;">County :&nbsp;<span id="viewfoundationCountyName"/></label>
                </div>
                <div class="control-group">
                    <label class="control-label" style="white-space:nowrap;">City :&nbsp;<span id="viewfoundationCityName"/></label>
                </div>
                <div class="control-group">
                    <label class="control-label" style="white-space:nowrap;">Status :&nbsp;<span id="viewfoundationStatus"/></label>
                </div>
            </div>
            <div class="span6">
                <div class="control-group">
                    <label class="control-label" style="white-space:nowrap;">Phone :&nbsp;<span id="viewphone"/></label>
                </div>
                <div class="control-group">
                    <label class="control-label" style="white-space:nowrap;">E Mail :&nbsp;<span id="viewemailId"/></label>
                </div>
                <div class="control-group">
                    <label class="control-label" style="white-space:nowrap;">Website :&nbsp;<span id="viewwebsite"/></label>
                </div>
                <div class="control-group">
                    <label class="control-label" style="white-space:nowrap;">ContactPerson/Manager :&nbsp;<span id="viewcontactPerson"/></label>
                </div>
                <div class="control-group">
                    <label class="control-label" style="white-space:nowrap;">ContactPersonPhone :&nbsp;<span id="viewcontactPersonPhone"/></label>
                </div>
                <div class="control-group">
                    <label class="control-label" style="white-space:nowrap;">ContactPersonEmail :&nbsp;<span id="viewcontactPersonEmail"/></label>
                </div>
            </div>
        </div>
    </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="clearfix"></div>
<hr>
<div class="widget">

<div class="widget-head">
    <div class="pull-left">Foundation Master</div>
    <div class="widget-icons pull-right">
        <a href="#" class="wminimize"><i class="icon-chevron-up"></i></a>
        <a href="#" class="wclose"><i class="icon-remove"></i></a>
    </div>
    <div class="clearfix"></div>
</div>

<div class="widget-content">

<table class="table table-bordered">
    <thead>

    <tr>

        <th>Foundation ID</th>
        <th>Foundation Name</th>
        <th>Website</th>
        <th>Contact Person</th>
        <th>Status</th>
        <th>Control</th>
    </tr>
    </thead>
    <tbody data-bind="foreach: foundationList">
    <tr>
        <td data-bind="text: $data.foundationId"></td>
        <td data-bind="text: $data.foundationName"></td>
        <td data-bind="text: $data.website"></td>
        <td data-bind="text: $data.contactPerson"></td>
        <td><span class="label label-success" data-bind="text: $data.foundationStatus"></span></td>
        <td>
            <div class="btn-group">
                <button class="btn btn-mini" title="Edit" data-bind="event:{click: $root.editFoundationOnClick}"><i class="icon-pencil"></i></button>
                <button class="btn btn-mini" title="View Foundation" data-target="#viewFoundation" data-bind="event:{click: $root.viewFoundationOnClick}"><i class="icon-eye-open"></i> </button>
            </div>
        </td>
        </tr>
    </tbody>
</table>

<div class="widget-foot">

    <div class="btn-group pull-right">
        <button type="button" class="btn"><i class="icon-angle-left"></i><i class="icon-angle-left"></i></button>

        <button type="button" class="btn"><i class="icon-angle-left"></i></button>
        <button type="button" class="btn">1</button>
        <button type="button" class="btn">2</button>
        <button type="button" class="btn">3</button>

        <button type="button" class="btn"><i class="icon-angle-right"></i></button>
        <button type="button" class="btn"><i class="icon-angle-right"></i><i class="icon-angle-right"></i></button>
    </div>
    <div class="clearfix"></div>

</div>

</div>

</div>
</div>
</div>
</div>
</div>
</script>

<div id="example"></div>
    <script type='text/javascript'>
        var options = {
            currentPage: 1,
            totalPages: 10
        }

        $('#example').bootstrapPaginator(options);
    </script>

虽然我在我的母版页中包含了分页器的 css 和 js 文件，但它没有呈现分页器，日期选择器也存在同样的问题。有人可以帮助我吗？