从外部调用 jquery 插件函数

Question

今天我在学习"How to create plugin in jQuery"

我有一个 table 最初有很多列我设置显示 none 到所有列并设置有限数量的用户可见列。并提供下一个和上一个按钮以显示下一列和上一列。

我想在单击下一步和上一个按钮时调用插件的 SetColumns_ColumnPagingTable() 函数。

我该如何实现。请帮助。

提前致谢。

请注意：现在两个按钮都是静态放置的。将来我会动态创建它们。我的 jsfiddle link - http://jsfiddle.net/saurabh29/Legh6re1/

Answer 1

您可以将 jquery 插件代码保存在某些 .js 文件中，假设 jQuery-custom-plugin.js 并使用 <script></script> 将其添加到 jquery 库插件下方标签。

见下文

<script src="/<your path upto js file>/jquery-1.11.0.js"></script>
<script src="/<your path upto js file>/jQuery-custom-plugin.js"></script>

注意 - 这里<your path upto js file>是js文件的实际路径。

然后调用document.ready里面的插件函数如下图

$(document).ready(function () {
   myTableReference= $("#myTable").ColumnPagingTable({
           showColumns: 5
   });
});

Answer 2

尝试this.UpdatedFiddle https://jsfiddle.net/Legh6re1/4/ 如果您要在 future.Then 中动态创建上一个和下一个按钮，您可以将代码移动到 SetColumns_ColumnPagingTable 中以单击这些按钮的事件。

     (function ($) {$.fn.ColumnPagingTable = function (options) {
                   ....
                   ....


var previousButton=$("<input />", { id: "btnNext_ColumnPagingTable",value: "Previous" ,type:"button"});
                previousButton.click(function() {

                        var rows = document.getElementById('myTable').rows;
                        var pointer = 0;
                        for (var row = 0; pointer < rows.length; row++, pointer++) {
                            var cols = rows[pointer].cells;
                            cols[endVisibleIndex].style.display = false ? '' : 'none';
                            cols[startVisibleIndex - 1].style.display = true ? '' : 'none';
                            endVisibleIndex--;
                            startVisibleIndex--;

                        }

                    });
 $(this).parent().append(previousButton);

从外部调用 jquery 插件函数

Call jquery Plugin function from outside

jquery

jquery-plugins