datatables获取数据列表

前端之家收集整理的这篇文章主要介绍了datatables获取数据列表前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
datatables插件+ajax大大提高了页面的访问速度,我用的ThinkPHP框架做的数据处理,下面贴代码
1.html文件
<table id="test" class="table table-striped table-bordered table-hover">
<thead>
<tr>

<th>标题</th>
<th>网页</th>
<th>创建时间</th> //这里和下面数据要对应,这有几个标签,下面就输出几个数据
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
2.jquery代码
var test = null;
$(document).ready(function () {
loadDisplayDataTable();
});
function loadDisplayDataTable()
{
tableObjRegion = $("#test").dataTable({
"language":{
"url":"datatable-zh.lang"
},
"processing": true,
"serverSide": true,
"autoWidth" : false,
"pagingType": "full_numbers",
"order": [[ 0,"desc" ]],
"sPaginationType": "",
"ajax": {
"url":"{:U('Test/loadDisplayDataTable')}",
"type":"POST",
"data":function(d) {
d.state = '0';
}
},
"columns":[
{"orderable": false,"name": "title","data": "title"},
{"orderable": false,"name": "descript","data": "descript"},"name": "utime","data": "utime"},
{
"orderable": false,
"data":function(data) {
return '<div class="action-buttons">' +
'<a class="btn btn-xs btn-info m-b-5" href="#update-page" data-toggle="modal" data-u_id="'+data.id+'"><i class="fa fa-edit"></i>编辑网页设置</a></br>'+
'<a class="btn btn-xs btn-info m-b-5" href="#update-model" data-toggle="modal" data-u_id="'+data.id+'"><i class="fa fa-edit"></i>编辑文章</a><br>' +
'<a class="btn btn-xs btn-danger" onclick=delete("'+data.id+'") href="#input-pwd-models" data-toggle="modal" data-obj_id="'+data.id+'"><i class="fa fa-trash"></i>&nbsp; 删除</a>' +
'</div>';
}
}
]
});
}

$('#update-data-model').on('show.bs.modal',function (event) {
var btn = $(event.relatedTarget);
var type = btn.data('state');
var u_id = btn.data('u_id');
$("input[name='u_id']").val(u_id);
var modal = $(this);
//加载当前id当前对象的数据
$.ajax({
"url" : "{:U('Test/update')}",
"data" : $("#updateModalForm").serialize(),
"type" : "post",
success : function (data) {
if(data && data.stat == 'success' && data.data) {
displayDataInForm(type,data.data);

} else {
myalert('数据加载失败!',null,2000);
}
},
error : function (data) {
myalert('系统故障!',2000);
}
});
});
$('#update-page').on('show.bs.modal',function (event) {
var btn = $(event.relatedTarget);
var type = btn.data('state');
var u_id = btn.data('u_id');
$("input[name='u_id']").val(u_id);
var modal = $(this);
//加载当前id对象的数据
$.ajax({
"url" : "{:U('Test/update')}",
success : function (data){
if(data && data.stat == 'success' && data.data){
displayDataInForm(type,data.data);
}else{
myalert('数据加载失败!',2000);
}
});
});
function displayDataInForm(type,data)
{
$("input[name='title']").val(data.title);
$("input[name='title']").val(data.title);
$("input[name='title']").val(data.title);
//此处修改为你数据库中的值
}
function updateData()
{
var u_type = $("input[name='u_type']").val();
$.ajax({
"url" : "{:U('ArticleData/updateArticleDataHandle')}",
"data" : $("#updateGeoDataModalForm").serialize(),
success : function (data) {
if(data && data.stat == 'ok') {
myalert('更新成功!',1500);
setTimeout("window.location.reload()",2000);
} else {
myalert('更新失败!',2000);
}
});
}
function updatePage() {
var u_type = $("input[name='u_type']").val();
$.ajax({
"url" : "{:U('Test/updateDataPages')}",
"data": $("#updateModalForm").serialize(),
"type": "post",
success : function (data) {
if(data && data.stat == 'ok'){
myalert('更新成功',2000);
}else{
myalert('更新失败!',
error : function (data) {
myalert('系统故障!',2000);
}
});
}
var delete= function (id)
{
if(confirm("你确定要删除文章吗?")){
$.ajax({
"url" : "{:U('Test/deleteData')}",
"data" : "id="+id,
"type" : "post",
success : function (data) {
if(data && data.stat == 'ok') {
myalert('删除成功!',1500);
setTimeout("window.location.reload()",2000);
} else {
myalert('删除失败!',2000);
}
},
error : function (data) {
myalert('系统故障',2000);
}
});
}
}
3.Controller代码
class TestController extends Controller
{
//数据列表展示
public function listHandle($draw='0',$start='0',$length='20',$order=null,$columns=null,$search=null,$da_isdel="0")
{
$logic = D(" Test","Logic");
$where['da_lay_id'] = I('da_lay_id');
$where['da_type'] = 'AT';
$data = $logic->getMemberForPagelist($search["value"],$da_isdel,$where,$order,$columns,$start,$length);
if (isset($data)) {
$data["recordsTotal"] = $data['total'];
$data["draw"] = $draw;
$data["recordsTotal"] = isset($data) ? $data['total'] : 0;
$data["recordsFiltered"] = isset($data) ? $data['total'] : 0;
$data["start"] = $start;
$data["data"] = isset($data) ? $data['datas'] : Array();
} else {
$data = null;
}
$this->ajaxReturn($data,"JSON");
}

//数据添加
function add(){
$da_lay_id = I('lay_id');
$activitys = I('datas');
$pids = explode(',',trim(I('p_id'),'));
$obj = D(" Test","Logic");
$result = $obj->createHandle($da_lay_id,$activitys,$pids);
$this->ajaxReturn($result,'JSON');

}
//逻辑删除
public function deleteDetail(){
$da_id = I('da_id');
$obj = D("Test","Logic");
$data = $obj->deleteDetail($da_id);
$this->ajaxReturn($data,'JSON');
}
4.logic代码
class TestDataLogic extends Model
{
public function loadDisplayDataTable($key='',$type_flag='',$cur_click_region=0,$length='10')
{
$obj = D('Admin/ TestData');
$likeKey = array('title','pagetitle');
$logic = 'OR';
$order_default = 'utime';
$aliasSelf = '';
$aliasJoin = '';
$isdel = 0;
$where = array('isdel' => $isdel);
return Paging::pagingForNormal($obj,$likeKey,$key,$logic,$isdel,$order_default,$length);
}
public function addArticleinfo(){
$d['utime'] = date('Y-m-d H:i:s');
$d['state'] = 0;
$d['isdel'] = 0;
$d['at_open'] = 0;
$d['title'] = trim(I('title'));
return D('Admin/ TestData')->addData($d);
}
public function update($m)
{
$obj = D('Admin/ TestData');
$map['id'] = $m['u_id'];
return $obj->findData($map);
}
public function updataData($map,$d) {
$d['state'] = 0;
$d['utime'] = date('Y-m-d H:i:s');
return D('Admin/ TestData')->saveData($map,$d);
}
public function deleteData($map,$d)
{
$d['state'] = 1;
$d['isdel'] = 1;
return D('Admin/TestData')->saveData($map,$d);
}
6.Model层
class TestDataModel extends Model
{
protected $tableName = '数据表';

public function addData($d)
{
if($d && count($d) > 0) {
return $this->add($d);
} else {
return false;
}
}

public function selectData($map)
{
return $this->where($map)->select();
}

public function saveData($map,$d)
{
return $this->where($map)->save($d);
}

public function findData($m)
{
return $this->where($m)->find();
}

public function deleteData($map)
{
return $this->where($map)->delete();
}

public function selectDataofId($map)
{
return $this->field('id')->where($map)->select();
}
public function updateData($m,$d)
{
if($m && is_array($d) && count($d) > 0) {
return $this->where($m)->save($d);
} else {
return false;
}
}
}

猜你在找的Ajax相关文章