datatables获取数据列表
来源:互联网 发布:linux 系统文件夹 编辑:程序博客网 时间:2024/05/16 07:22
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> $(document).ready(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"}, {"orderable": false, "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> 删除</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('系统故障!',null,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')}", "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('系统故障!',null,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(), "type" : "post", success : function (data) { if(data && data.stat == 'ok') { myalert('更新成功!',null,1500); setTimeout("window.location.reload()", 2000); } else { myalert('更新失败!',null,2000); } }, error : function (data) { myalert('系统故障!',null,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('更新成功',null,1500); setTimeout("window.location.reload()",2000); }else{ myalert('更新失败!',null,2000); } }, error : function (data) { myalert('系统故障!',null,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('删除成功!',null,1500); setTimeout("window.location.reload()", 2000); } else { myalert('删除失败!',null,2000); } }, error : function (data) { myalert('系统故障',null,2000); } }); } } //数据列表展示 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'); } $d['title'] = trim(I('title')); public function update($m) { $obj = D('Admin/TestData'); $map['id'] = $m['u_id']; return $obj->findData($map); } 6.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; } }
<thead>
<tr>
<th>标题</th>
<th>网页</th>
<th>创建时间</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
2.jquery代码
var test = null;
function loadDisplayDataTable()
"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> 删除</a>' +
'</div>';
}
3.Controller代码
class TestController extends Controller
{
4.logic代码
class TestDataLogic extends Model
{
public function loadDisplayDataTable($key='', $type_flag='', $cur_click_region=0, $order=null, $columns=null, $start='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, $where, $isdel, $order, $order_default, $columns, $start, $length);
}
public function addArticleinfo(){
$d['utime'] = date('Y-m-d H:i:s');
$d['state'] = 0;
$d['isdel'] = 0;
$d['at_open'] = 0;
return D('Admin/TestData')->addData($d);
}
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);
}
class TestDataModel extends Model
{
}
1 0
- datatables获取数据列表
- Datatables部分返回数据获取不到
- 使用dataTables插件从servlet获取数据
- datatables 获取某一行的json数据
- jQuery DataTables插件 从服务器端获取数据的方法
- Jquery DataTables 获取表格数据及选中行数据
- Jquery DataTables 获取表格数据及选中行数据
- dataTables 获取表格数据及选中行数据
- Datatables Ajax获取多维数组数据 columns指定
- Datatables通过某列元素操作获取该行数据
- JQuery DataTables 重载当前列表
- datatables——数据
- 获取LISTVIEW列表中的数据
- 分页获取数据列表GetListByPage
- 移动端获取数据列表
- 获取列表数据到后台
- 关于Java Web使用的DataTables插件获取所有数据以及表格刷新
- dataTables获取选中行数据
- Java中final关键字
- Android openGL ES 2.0入门--画三角形、正方形
- HDOJ-----1878并查集+欧拉回路
- Chopsticks
- HDOJ-2120 Ice_cream's world I
- datatables获取数据列表
- [1st. Aug. 16] NOIP 2011 计算系数——纠结了很久才发现原来第一次做就大体做对了
- C++基础知识汇总
- C#控制台基础 string字符串的连接
- 网络连接取数据,并加载到ListView的实现
- Python机器学习——如何shuffle一个数据集(ndarray类型)
- mysql主从复制
- JavaWeb学习笔记----Servlet的ServletConfig对象和ServletContext对象的使用
- UI高级--触摸与手势