Question

我使用DataTable.js。我想在桌子上添加一个按钮。我正在使用Knockout.Js与TableTools 2.2.4和DataTables 1.10.7。

有人可以帮我解决这个问题吗？

添加了示例代码供您参考。

getAppoiintmentData: function () {
    var self = this;
    showLoadingImage();
    $.ajax({
        type: "POST",
        url: url,
        data: "",
        error: function (xhr, status, error) {
            noty({ text: "Failed to load Appointment data.", timeout: 5000, type: NOTY_MSG_TYPE.error });
            hideLoadingImage();
            // do something about the error
        },
        success: function (response) {
            self._extractAppointment(response.ReturnData);
            ko.applyBindings(MANAGE_APPOINTMENT_VIEW);
           var table =  $("#appoinmentListdatatable").DataTable({ responsive: true });
            $.fn.dataTable.TableTools(table, {
                "buttons": [
                    "copy",
                    "csv",
                    "xls",
                    "pdf",
                    { "type": "print", "buttonText": "Print me!" }
                ]
            });
            hideLoadingImage();
        }
    });
}
$(function () {  MANAGE_APPOINTMENT_VIEW.getAppoiintmentData(); });

HTML代码：

<div class="block full">
    <div class="block-title">
        <h2>Appointments</h2>
    </div>
    <div class="table-responsive ">
        <table id="appoinmentListdatatable" class="table table-striped table-bordered table-vcenter">
            <thead>
                <tr class="th">
                    <th width="5%"><input type="checkbox" data-bind="checked: makeAllCheckUnCheck($element.checked)" /> </th>
                    <th width="16%">Patient Name</th>
                    <th width="16%">Mobile No.</th>
                    <th width="16%">Appointment Date</th>
                    <th width="16%">Appointment Time</th>
                    <th>Reason</th>
                    <th width="8%">Action</th>
                </tr>
            </thead>
            <tbody>
                <!-- ko foreach: appoinmentList() -->
                <tr>
                    <td style="text-align:center"><input type="checkbox" data-bind="checked: isChecked()"/></td>
                    <td data-bind="text: Name"></td>
                    <td data-bind="text: Mobile"></td>
                    <td data-bind="text: AppointmentDateText()"></td>
                    <td data-bind="text: AppointmentTime"></td>
                    <td data-bind="text: Reason"></td>
                    <td style="text-align:center">
                        <a href="javascript:void(0)" data-rel="popup" data-position-to="window" data-transition="pop" data-bind="click: $parent.openPopUp" data-toggle="tooltip" title="View More" class="btn btn-effect-ripple btn-xs btn-success"><i class="fa fa-pencil"></i></a>
                        <button class="btn btn-effect-ripple btn-xs btn-danger" data-bind="click: $parent.confirmCancelAppointmentConfirm"><i class="fa fa-times"></i></button>
                    </td>
                </tr>
                <!-- /ko -->
            </tbody>
        </table>

    </div>
</div>

Answer 1

不确定，请检查您的应用程序中是否使用了多个Jquery引用。也许你没有注意到捆绑引用的那个。如果多次推荐，请删除一个。它将解决您的问题。

未捕获的TypeError：$ .fn.dataTable.TableTools不是函数

1 个答案: