jquery ajax 可增加表格,jQuery+Ajax实现动态添加表格tr td功能示例_婳祎_前端开发者...

本文实例讲述了

功能:ajax获取后台返回数据给table动态添加tr/td

ajax部分:

var year = $('#year').val();//下拉框数据

var province= $('#province').val();//下拉框数据

$('table tbody').

php后台(thinkPHP处理):

$year = I('get.year');

$province = I('get.province');

$condition = array();

$year && $condition = array('eq',$year);

$province && $condition = array('eq',$province);

$dataList = M('Plan')->where($condition)->select();

if(false != $dataList){

$data['msg'] = '1';

$data['data'] = $dataList;

echo json_encode($data);

exit;

}else{

$data['msg'] = '0';

$data['data'] = '';

echo json_encode($data);

exit;

}

更多关于

希望本文所述对大家jQuery程序设计有所帮助。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我了解您的问题。以下是一个前端ajax分页实例,使用jQuery实现分页功能: HTML部分: ```html <div id="table-container"> <table> <thead> <tr> <th>ID</th> <th>Name</th> <th>Email</th> </tr> </thead> <tbody id="table-body"> </tbody> </table> </div> <div id="pagination"></div> ``` JS部分: ```javascript $(document).ready(function() { var currentPage = 1; var pageSize = 10; var totalPage = 0; function loadTableData(page) { $.ajax({ url: "your-backend-api-url", data: { page: page, pageSize: pageSize }, success: function(response) { var tableBodyHtml = ""; $.each(response.data, function(index, item) { tableBodyHtml += "<tr>"; tableBodyHtml += "<td>" + item.id + "</td>"; tableBodyHtml += "<td>" + item.name + "</td>"; tableBodyHtml += "<td>" + item.email + "</td>"; tableBodyHtml += "</tr>"; }); $("#table-body").html(tableBodyHtml); currentPage = response.currentPage; pageSize = response.pageSize; totalPage = response.totalPage; renderPagination(); } }); } function renderPagination() { var paginationHtml = ""; if (currentPage > 1) { paginationHtml += '<a href="#" class="prev-page">Prev</a>'; } else { paginationHtml += '<span class="disabled">Prev</span>'; } for (var i = 1; i <= totalPage; i++) { if (i === currentPage) { paginationHtml += '<span class="current-page">' + i + '</span>'; } else { paginationHtml += '<a href="#" class="page">' + i + '</a>'; } } if (currentPage < totalPage) { paginationHtml += '<a href="#" class="next-page">Next</a>'; } else { paginationHtml += '<span class="disabled">Next</span>'; } $("#pagination").html(paginationHtml); } loadTableData(currentPage); $("#pagination").on("click", ".prev-page", function() { loadTableData(currentPage - 1); }); $("#pagination").on("click", ".next-page", function() { loadTableData(currentPage + 1); }); $("#pagination").on("click", ".page", function() { var page = $(this).text(); loadTableData(page); }); }); ``` 这个示例中,我们使用了一个loadTableData函数来通过Ajax请求获取数据。我们还使用了一个renderPagination函数来呈现分页器。在分页器中,我们使用了三种不同的HTML元素来表示当前页面、可用页面和不可用页面。我们还为分页器中的每个页面添加了一个click事件,这个事件会触发loadTableData函数并传递相应的页面号码。 请注意,这只是一个示例,您需要将“your-backend-api-url”替换为您自己的后端API URL,以便从服务器获取数据。 希望这可以帮助到您!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值