版权声明：咔咔 来自https://blog.csdn.net/fangkang7 https://blog.csdn.net/fangkang7/article/details/86563681
author：咔咔
wechat：fangkangfk
案例：
ajax方式进行带参数添加样式跟加载数据
第一次加载数据的时候，是没有分类这个值得，所以我们需要给一个默认值
/**
* author:咔咔
*
* 视频列表
* @return array
*/
public function index()
{
$param = $this->request->param();
if($this->request->isPost()){
$page_index = $this->request->param('page_index');
$page_size = $this->request->param('page_size');
if(empty($param['vt_id'])){
$where['vt_id'] = 1;
}else{
$where['vt_id'] = $param['vt_id'];
}
if(!empty($param['vi_title'])){
$where['vi_title'] = ['like','%'.$param['vi_title'].'%'];
}
$videoList = $this->videoInfoModel->videoInfoList($where,$page_index,$page_size);
$count = count($videoList);
return [
'data' => $videoList,
'total_count' => $count,
];
}
// 获取视频分类
$videoType = $this->videoTypeModel->field('vt_id,vt_name')->select();
$this->assign('videoType',$videoType);
return $this->fetch();
}第一次通过loadData进行加载第一次默认数据，如果是第一次查询数据的话。我们需要加上vt_id一个默认值，这个默认值就是第一次带上样式的id
点击样式时，我们需要在进行ajax拼接数据，然后将vt_id的这个值给拼接一下
在点击样式后，在点击查询，在将vt_id跟查询内容一起当参数传递给后台即可
<script type="text/javascript">
window.onload= function () {
loadData() //请求数据
getPage() //分页操作
}
var page=1; //设置首页页码
var limit={$limit}; //设置一页显示的条数
var total; //总条数
var vt_id;
function loadData(){
$.ajax({
type:"post",
url:"{url(video/index)}",//对应controller的URL
async:false,
dataType: 'json',
data:{
"page_index":page,
"page_size":limit,
},
success:function(ret){
total=ret.total_count;
var data1=ret.data;
var html= '';
for(var i=0;i<data1.length;i++){
html+='<tr>';
html+='<td>'+ data1[i].vi_id +'</td>';
html+='<td>'+ data1[i]['vi_title'] +'</td>';
html+='<td>';
html+='<a class="layui-badge-rim j-iframe" data-full="1" data-href="{:url('view')}?vi_id='+data1[i].vi_id+'" data-title="查看视频" href="javascript:;" title="查看">查看</a>';
html+='<a class="layui-badge-rim j-iframe" data-full="1" data-href="{:url('edit')}?vi_id='+data1[i].vi_id+'" data-title="修改视频" href="javascript:;" title="编辑">编辑</a>';
html+='<a class="layui-badge-rim del" data-full="1" data-href="{:url('del')}?vi_id='+data1[i].vi_id+'" href="javascript:;" title="删除">删除</a>';
html+='<a class="layui-badge-rim j-iframe" data-full="1" data-href="{:url('DramaSeries')}?vi_id='+data1[i].vi_id+'" data-title="剧集列表" href="javascript:;" title="剧集管理">剧集管理</a>';
html+='</td>';
html+='</tr>';
}
$("#tab_list").html(html);
}
});
}
// 查询
$('#query').click(function(){
var content = $('#content').val();
if(!content){
window.location.reload();
return false
}
if(vt_id == undefined){
vt_id = 1
}
$.ajax({
type:"post",
url:"{url(Video/index)}",//对应controller的URL
async:false,
dataType: 'json',
data:{
"page_index":page,
"page_size":limit,
"vi_title":content,
'vt_id' : vt_id
},
success:function(ret){
total=ret.total_count;
getPage();
var data1=ret.data;
var html= '';
for(var i=0;i<data1.length;i++){
html+='<tr>';
html+='<td>'+ data1[i].vi_id +'</td>';
html+='<td>'+ data1[i]['vi_title'] +'</td>';
html+='<td>';
html+='<a class="layui-badge-rim j-iframe" data-full="1" data-href="{:url('view')}?vi_id='+data1[i].vi_id+'" data-title="查看视频" href="javascript:;" title="查看">查看</a>';
html+='<a class="layui-badge-rim j-iframe" data-full="1" data-href="{:url('edit')}?vi_id='+data1[i].vi_id+'" data-title="修改视频" href="javascript:;" title="编辑">编辑</a>';
html+='<a class="layui-badge-rim del" data-full="1" data-href="{:url('del')}?vi_id='+data1[i].vi_id+'" href="javascript:;" title="删除">删除</a>';
html+='<a class="layui-badge-rim j-iframe" data-full="1" data-href="{:url('DramaSeries')}?vi_id='+data1[i].vi_id+'" data-title="剧集列表" href="javascript:;" title="剧集管理">剧集管理</a>';
html+='</td>';
html+='</tr>';
}
$("#tab_list").html(html);
}
});
});
function getPage(){
layui.use('laypage', function(){
var laypage = layui.laypage
, layer = layui.layer;
laypage.render({
elem: 'pages'
,count: total //数据总数，从服务端得到
,limit:limit
,jump: function(obj, first){
page=obj.curr; //改变当前页码
limit=obj.limit;
if(!first){
loadData()
}
}
});
});
}
// 点击删除
$(document).on('click','.del',function(){
var that = $(this),
href = !that.attr('data-href') ? that.attr('href') : that.attr('data-href');
layer.confirm('删除之后无法恢复，您确定要删除吗？', {title:false, closeBtn:0}, function(index){
if (!href) {
layer.msg('请设置data-href参数');
return false;
}
$.get(href, function(res){
layer.msg(res.msg);
if (res.code == 1) {
that.parents('tr').remove();
}
});
layer.close(index);
});
return false;
})
// 点击类型
$('.type').click(function () {
vt_id = $(this).attr('vt_id');
$(this).addClass('checked').siblings().removeClass('checked');
$.post("{:url('video/index')}",{vt_id:vt_id},function (ret) {
total=ret.total_count;
getPage();
var data1=ret.data;
var html= '';
for(var i=0;i<data1.length;i++){
html+='<tr>';
html+='<td>'+ data1[i].vi_id +'</td>';
html+='<td>'+ data1[i]['vi_title'] +'</td>';
html+='<td>';
html+='<a class="layui-badge-rim j-iframe" data-full="1" data-href="{:url('view')}?vi_id='+data1[i].vi_id+'" data-title="查看视频" href="javascript:;" title="查看">查看</a>';
html+='<a class="layui-badge-rim j-iframe" data-full="1" data-href="{:url('edit')}?vi_id='+data1[i].vi_id+'" data-title="修改视频" href="javascript:;" title="编辑">编辑</a>';
html+='<a class="layui-badge-rim del" data-full="1" data-href="{:url('del')}?vi_id='+data1[i].vi_id+'" href="javascript:;" title="删除">删除</a>';
html+='<a class="layui-badge-rim j-iframe" data-full="1" data-href="{:url('DramaSeries')}?vi_id='+data1[i].vi_id+'" data-title="剧集列表" href="javascript:;" title="剧集管理">剧集管理</a>';
html+='</td>';
html+='</tr>';
}
$("#tab_list").html(html);
})
})
</script>