How to convert jquery code into a reusable plugin/function

Question

I have created a bootstrap datatable like string and its working perfect but i am defining the table in my code only. I want to write it like plugins.

I want to call the function only when i call it like this $('table').newDataTable() but write now i reached this

$(document).ready(function() {
  var showInterval = 10;
  var showCount = showInterval;
  var startCount = 0;
  $('table tbody tr').hide();
  $('table tbody tr').slice(startCount, showCount).show();
  $('.top_div_left select').on('change', function() {
    var showCount = $(this).val();
    $('table tbody tr').hide();
    $('table tbody tr').slice(startCount, showCount).show();
  });
  $('.top_div_right input').on('input propertychange', function() {
    var showCount = $('.top_div_left select').val();
    var thisText = $(this).val().trim().toLowerCase();
    var i;
    if (thisText == "") {
      $('table tbody tr').hide();
      $('table tbody tr').slice(startCount, showCount).show();
    } else {
      var trLength = $('table tbody tr').slice(startCount, showCount).length;
      $('table tbody tr').slice(startCount, showCount).each(function() {
        var rowText = $(this);
        if (rowText.text().toLowerCase().indexOf(thisText) == -1) {
          $(this).hide();
        } else {
          $(this).show();
        };
      });
    };
  });
  var totalRows = $('table tbody tr').length;
  var pagiLength = Math.ceil(totalRows / showCount);
  for (var i = 1; i <= pagiLength; i++) {
    $('.pagination ul li.right').before('<li class="page"><a href="#">' + i + '</a></li>');
  };
  $('.pagination ul li.page').eq($('table').attr('data-page') - 1).addClass('active');
  $(document).on('click', '.pagination ul li.page a', function(e) {
    e.preventDefault();
    $('.pagination ul li').removeClass('active');
    $(this).parent('li').addClass('active');
    var newPage = $(this).text();
    showCount = showInterval * newPage;
    startCount = showCount - showInterval;
    $('table tbody tr').hide();
    $('table tbody tr').slice(startCount, showCount).show();
  });
  $('.pagination ul li.left a').on('click', function(e) {
    e.preventDefault();
    $('.pagination ul li.page.active').prev('li.page').find('a').trigger('click');
  });
  $('.pagination ul li.right a').on('click', function(e) {
    e.preventDefault();
    $('.pagination ul li.page.active').next('li.page').find('a').trigger('click');
  });
});

.clear {
  clear: both;
}
table {
  border-collapse: collapse;
  border: 1px solid #ccc;
  width: 600px;
  margin: 0 auto;
  text-align: left;
}
table tr td,
table tr th {
  padding: 7px 10px;
}
.top_div {
  width: 600px;
  margin: 0 auto 10px;
}
.top_div .top_div_left {
  float: left;
}
.top_div .top_div_left select {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 7px;
  height: 30px;
  padding: 0 10px;
  box-sizing: border-box;
  outline: none;
}
.top_div .top_div_right {
  float: right;
}
.top_div .top_div_right input {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 7px;
  height: 30px;
  padding: 0 10px;
  box-sizing: border-box;
  outline: none;
}
.pagination {
  width: 600px;
  margin: 10px auto 0;
  text-align: right;
}
.pagination ul {
  font-size: 0;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 0;
  float: left;
  overflow: hidden;
}
.pagination ul li {
  list-style: none;
  display: inline-block;
  font-size: 16px;
  border-right: 1px solid #ccc;
}
.pagination ul li:last-child {
  border: none;
}
.pagination ul li a {
  padding: 6px 12px;
  display: block;
  color: #000;
  text-decoration: none;
}
.pagination ul li.active a,
.pagination ul li:hover a {
  background: #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="top_div">
  <div class="top_div_left">
    <select>
      <option value="10">10</option>
      <option value="25">25</option>
      <option value="50">50</option>
      <option value="100">100</option>
    </select>
  </div>
  <div class="top_div_right">
    <input type="text">
  </div>
  <div class="clear"></div>
</div>
<table cellpadding="0" cellspacing="0" border="1" data-page="1">
  <thead>
    <tr>
      <th>S.No</th>
      <th>Name</th>
      <th>Count</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Gaurav Aggarwal</td>
      <td>First</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Anurag Verma</td>
      <td>Second</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Ankit</td>
      <td>Third</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Abhishek</td>
      <td>Fourth</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Niharika</td>
      <td>Fifth</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Nidhi</td>
      <td>Six</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Rashmi</td>
      <td>Seven</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Deepti</td>
      <td>Eighth</td>
    </tr>
    <tr>
      <td>9</td>
      <td>Neha</td>
      <td>Nineth</td>
    </tr>
    <tr>
      <td>10</td>
      <td>Shruti</td>
      <td>Tenth</td>
    </tr>
    <tr>
      <td>11</td>
      <td>Gaurav Aggarwal</td>
      <td>First</td>
    </tr>
    <tr>
      <td>12</td>
      <td>Anurag Verma</td>
      <td>Second</td>
    </tr>
    <tr>
      <td>13</td>
      <td>Ankit</td>
      <td>Third</td>
    </tr>
    <tr>
      <td>14</td>
      <td>Abhishek</td>
      <td>Fourth</td>
    </tr>
    <tr>
      <td>15</td>
      <td>Niharika</td>
      <td>Fifth</td>
    </tr>
    <tr>
      <td>16</td>
      <td>Nidhi</td>
      <td>Six</td>
    </tr>
    <tr>
      <td>17</td>
      <td>Rashmi</td>
      <td>Seven</td>
    </tr>
    <tr>
      <td>18</td>
      <td>Deepti</td>
      <td>Eighth</td>
    </tr>
    <tr>
      <td>19</td>
      <td>Neha</td>
      <td>Nineth</td>
    </tr>
    <tr>
      <td>20</td>
      <td>Shruti</td>
      <td>Tenth</td>
    </tr>
    <tr>
      <td>21</td>
      <td>Gaurav Aggarwal</td>
      <td>First</td>
    </tr>
    <tr>
      <td>22</td>
      <td>Anurag Verma</td>
      <td>Second</td>
    </tr>
  </tbody>
</table>
<div class="pagination">
  <ul>
    <li class="left"><a href="#">&laquo;</a>
    </li>
    <li class="right"><a href="#">&raquo;</a>
    </li>
  </ul>
</div>

in which case it depends if thee function was meant to be be a constructor or not. In this case, no! — Akshay Khandelwal
– Akshay Khandelwal, Commented Jul 4, 2016 at 12:17
when you use plugins you just include the libraries and call the function in your js i want to write this code as a library only and should be able to call on particular table when needed — Gaurav Aggarwal
– Gaurav Aggarwal, Commented Jul 4, 2016 at 12:17
new $.fn.dataTable.Api( selector ); This is the Max that you can do. Copied from Datatable API docs — Akshay Khandelwal
– Akshay Khandelwal, Commented Jul 4, 2016 at 12:21

A G · Accepted Answer · 2016-07-04 12:52:20Z

I won't update the entire code but explain how to decouple the table from your code. Lets cut down the entire example to just one requirement - Display number of rows selected in the dropdown.

Use JavaScript namespacing to separate your plugin. Pass a generic table object and necessary parameters to the plugin. Idea is to make the function work on any kind of table. Many times plugins take json object as a parameter. Usually when the input parameters grow large.

$(document).ready(function() {
  var showInterval = 5;
  var showCount = showInterval;
  var startCount = 0;

  $('.top_div_left select').on('change', function() {
    showCount = $(this).val();
    mytableFilter.filter("#mytable", showCount);  
  });

  mytableFilter.filter("#mytable", showCount);  

});

(function (mytableFilter, $, undefined) {
  mytableFilter.filter = function(tableSelector, count) {
  $(tableSelector).find('tbody tr').hide();
  $(tableSelector).find('tbody tr').slice(0, count).show();  
  };

}(window.mytableFilter = window.mytableFilter || {}, jQuery));

JSFiddle

Jquery Plugin Tutorial

Collectives™ on Stack Overflow

How to convert jquery code into a reusable plugin/function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related