jquery中DataTable如何实现前后台动态分页-内江站浩晨众云

新闻中心

这里有您想知道的互联网营销解决方案

jquery中DataTable如何实现前后台动态分页

小编给大家分享一下jquery中DataTable如何实现前后台动态分页，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

成都创新互联公司为客户提供专业的网站建设、网站设计、程序、域名、空间一条龙服务，提供基于WEB的系统开发. 服务项目涵盖了网页设计、网站程序开发、WEB系统开发、微信二次开发、成都手机网站制作等网站方面业务。

html代码:






测试页面



  
  






  
  
    Name
    Cellphone
    Position
    Company
    Salary

$(document).ready(function() { refreshDataTable(); }); var refreshDataTable=function() { var table = $('#example').DataTable({ //"ajax":"data/tabledata.json", // "iDisplayLength": 3, "sPaginationType": "full_numbers", "bPaginite": true, "bInfo": true, "bSort": true, "processing": false, "serverSide": true, "sAjaxSource": "customize/datatable.php",//这个是请求的地址 "fnServerData": retrieveData }); function retrieveData(url, aoData, fnCallback) { var data={"data":{"id":"123123","name":"2s",}}; $.ajax({ url: url,//这个就是请求地址对应sAjaxSource data : { "aoData" : JSON.stringify(aoData) }, type: 'POST', dataType: 'json', async: false, success: function (result) { //var obj=JSON.parse(result); console.log(result); fnCallback(result);//把返回的数据传给这个方法就可以了,datatable会自动绑定数据的 }, error:function(XMLHttpRequest, textStatus, errorThrown) { alert("status:"+XMLHttpRequest.status+",readyState:"+XMLHttpRequest.readyState+",textStatus:"+textStatus); } }); } };

PHP代码:

name=="sEcho"){
    $sEcho=$value->value;
  }
  if($value->name=="iDisplayStart"){
    $iDisplayStart=$value->value;
  }
  if($value->name=="iDisplayLength"){
    $iDisplayLength=$value->value;
  }
  }  
  $Array = Array(); 
   //此处生成50条数据，模仿数据库数据
  for ($i = 1; $i < 51; $i++) {
    $d = array($i,$i,$i,$i,$i);
    Array_push($Array, $d);
  }

   $json_data = array ('sEcho'=>$sEcho,'iTotalRecords'=>50,'iTotalDisplayRecords'=>50,'aaData'=>array_slice($Array,$iDisplayStart,$iDisplayLength)); //按照datatable的当前页和每页长度返回json数据
  $obj=json_encode($json_data);
  echo $obj; 

?>

效果图：

jquery中DataTable如何实现前后台动态分页

看完了这篇文章，相信你对“jquery中DataTable如何实现前后台动态分页”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！

新闻标题：jquery中DataTable如何实现前后台动态分页
URL网址：http://www.jxjierui.cn/article/pjogig.html

新闻中心

其他资讯