datatable分页php,jquery DataTable前后台动态分页实现方法分享

本文主要介绍了jquery DataTable实现前后台动态分页。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

整理文档，搜刮出一个jquery DataTable实现前后台动态分页，稍微整理精简一下做下分享。

html代码:

测试页面

NameCellphonePositionCompanySalary

$(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代码:<?php

header('Content-type: text/json');

$res = $_POST['aoData'];

$sEcho = 0;

$iDisplayStart = 0; // 起始索引

$iDisplayLength = 0;//分页长度

$jsonarray= json_decode($res) ;

foreach($jsonarray as $value){

if($value->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;

?>

效果图：

相关推荐：