189 8069 5689

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如何实现前后台动态分页”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


新闻标题:jquery中DataTable如何实现前后台动态分页
分享地址:http://cdxtjz.cn/article/pjogig.html

其他资讯