基于jquery实现表格无刷新分页

前端之家收集整理的这篇文章主要介绍了基于jquery实现表格无刷新分页前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲解了基于jquery实现表格无刷新分页功能分享给大家供大家参考,具体内容如下

效果图:

具体代码

面向对象的无刷新表格<a href="https://www.jb51.cc/tag/fenye/" target="_blank" class="keywords">分页</a> <Meta http-equiv="content-type" content="text/html;charset=utf-8"/>
显示 */ table,th,td {font: 12px Arial,Helvetica,sans-serif,'宋体';margin: 0;padding: 0} table{border-spacing: 0;border-collapse: collapse;empty-cells: show} .data-table {width: 100%;border-style: none;background-color: #fff;/*margin-bottom: 20px;*/text-align: left;} .data-table th,.data-table td { padding: 5px;line-height: 30px} .data-table thead th {background-color: #eee;margin: 0;text-align: left;border-top: 1px solid #cfcfcf;border-bottom: 1px solid #cfcfcf;font-weight: 500} .data-table tbody td {background-color: #fff;border-bottom: 1px dotted #ddd;table-layout:fixed;word-break:break-all;border-collapse:collapse;font-weight: 400} .data-table tbody tr.evenrow td {background-color: #f4f4f4;} .data-table tfoot td {background-color: #fafafa;text-align: right;border-bottom: 1px solid #cfcfcf;} /*表格分页列表*/ .data-table td.paging a {border: 1px solid #eee; color: #444; margin: 4px; padding: 2px 7px; text-decoration: none; text-align:center;} /*表格分页当前页*/ .data-table td.paging a.current {background: #eee; border: 1px solid #CFCFCF; color: #444; font-weight: bold;} .data-table td.paging input{border:1px solid #4D90BB;font-family:Arial,Tahoma; font-size:12px; padding:0 5px;outline: none} .data-table td.paging .search-txt{height:30px;line-height:30px;width: 100px } .data-table td.paging .search-btn{height: 32px;border-left:none;cursor: pointer;_filter:chroma(color=#000000);_border:none;} /*表格排序*/ .data-table thead th.bg{background:#eee url("../images/bg.gif") right center no-repeat;cursor: pointer} .data-table thead th.asc{background: url("../images/asc.gif") right center no-repeat;cursor: pointer} .data-table thead th.desc{background: url("../images/desc.gif") right center no-repeat;cursor: pointer}

以上就是基于jquery实现表格无刷新分页功能的详细代码,希望对大家的学习有所帮助。

原文链接:https://www.f2er.com/jquery/50677.html

猜你在找的jQuery相关文章