0
نمایش اطلاعات در GridView با استفاده از jquery ui
نمایش اطلاعات در GridView با استفاده از jquery ui
در این پست نحوه نمایش اطلاعات در یک GridView با استفاده از jquery ui را توضیح می دهیم.
از قابلیت های این GridView داشتن شماره صفحه ، جستجوی اتوماتیک در اطلاعات و همچنین نمایش تعداد رکوردهای مورد نیاز در هر صفحه می باشد.
برای شروع ابتدا باید کتابخانه های jquery زیر را به برنامه خود اضافه کنید.
فایل های css
dataTables.jqueryui.css
jquery-ui.css
فایل های jquery
dataTables.jqueryui.js
jquery.dataTables.min.js
jquery-1.11.1.min.js
فایل های بالا را می توانید از سایت datatables.net دانلود کنید.
سپس در صفحه ای که می خواهید کدهای زیر را کپی کنید.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Content/jquery-ui.css" rel="stylesheet" />
<link href="Content/dataTables.jqueryui.css" rel="stylesheet" />
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
</tbody>
</table>
<script src="Scripts/jquery-1.11.1.min.js"></script>
<script src="Scripts/jquery.dataTables.min.js"></script>
<script src="Scripts/dataTables.jqueryui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#example').dataTable();
});
</script>
</body>
</html>
در کدهای بالا ابتدا لینک های مربوط به کتابخانه های jquery ui را قرار دادیم و سپس یک id به نام example برای جدول تعریف کردیم و شما می توانید به جای example هر چیز دیگری بنویسید اما در آخر یک خط کد jquery نوشتیم و id جدول را مشخص کردیم و شما باید در این قسمت id ی که برای جدول مشخص می کنید را بنویسید.
این مطلب را به اشتراک بگذارید...
نظر / سوال