1
文字列のようなデータストラテジーを作成していますが、完璧ですが、私のコードでテーブルを定義しています。私はプラグインのように書いて欲しい。jqueryコードを再利用可能なプラグイン/関数に変換する方法
は、私は私がこの
$(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="#">«</a>
</li>
<li class="right"><a href="#">»</a>
</li>
</ul>
</div>
あなたは**新しい**キーワードを使用することを意味ですか？ –
この場合、関数がコンストラクタであるかどうかに依存します。この場合、いいえ！ –
プラグインを使用すると、ライブラリをインクルードしてjs内の関数を呼び出すことができます。ライブラリとしてのみこのコードを書きたいので、必要に応じて特定のテーブルを呼び出すことができます。 –