jQuery php mysql-显示所有项目时如何隐藏加载更多按钮

时间:2018-11-17 08:34:33

标签: php jquery mysql

我有一个代码,用于显示数据库列表和一个loadmore按钮。显示所有记录列表后,单击loadmore按钮以显示空白位置。 enter image description here

显示所有记录后如何隐藏loadmore按钮?

index.php文件:

<?php $chinp=$_GET['schinp'];?>
<div  id="schts"></div>
<button id="btnsch">load more</button>

<script>
$(document).ready(function() {
    var chinp="<?php echo $chinp;?>";
  var srchco = 1;
  var offsrch = 0;
  $("#btnsch").click(function() {
    $.ajax({
        method: "POST",
       url: "search.php",
        data: { srchcoun: srchco, offsrch: offsrch ,chinp:chinp}
      })
      .done(function(msg) {
        $("#schts").append(msg);
      });
    offsrch = offsrch + srchco;
  });

  $("button").trigger("click");
});
</script>

search.php:

$srchcoun=$_POST['srchcoun'];
$offsrch=$_POST['offsrch'];
$chinp=$_POST['chinp'];
$schql="SELECT id, name, lastname FROM t_users WHERE name LIKE '$chinp' ORDER BY name ASC limit $offsrch, $srchcoun";
$rsch=mysqli_query($conn,$schql);

while ($rch=mysqli_fetch_assoc($rsch)){
     $scid=$rch['id'];$snm=$rch['name'];$slnm=$rch['lastname'];?>

<div class="alsu">
<img class="sask" src="pic/<?php echo $scid;?>.png" alt="">
<span class="snm">Name : <?php echo $snm." ".$slnm;?></span>
</div>
<?php }?>
</div>

谢谢。

3 个答案:

答案 0 :(得分:2)

以下是根据您的代码隐藏加载更多按钮的代码。

将此代码替换为您的第一个文件。

import matplotlib.pyplot as plt
y = range(0,21,1)
x = range(0,21,1)
y_err = [0.5]*21

x_low = [0.7]*21
x_upper = [1.4]*21
x_err = [x_low, x_upper]

fig, ax = plt.subplots()
idx = range(0, 16, 7)
for start, stop in zip(idx[:-1], idx[1:]):
    ax.errorbar(x[start:stop], y[start:stop], y_err[start:stop], \
                [ i[start:stop] for i in x_err])

现在将此代码添加到您的搜索文件中。

<script type="text/javascript">
$(document).ready(function() {
  var chinp="<?php echo $chinp;?>";
  var srchco = 2;
  var offsrch = 0;
  var page_num = 0;

  $("#btnsch").click(function() {
    $.ajax({
      method: "POST",
      url: "search.php",
      data: { srchcoun: srchco, offsrch: offsrch ,chinp:chinp, page_num : page_num}
      })
      .done(function(msg) {
        if(msg == 'noMoreData'){
          $("#btnsch").hide();
        } else {
          $("#schts").append(msg);
        }
      });
      page_num = page_num + 1;
    offsrch = offsrch + srchco;
  });

  $("#btnsch").trigger("click");
});
</script>

尝试一下,让我知道是否有任何问题。

答案 1 :(得分:0)

从数据库加载整个数据后,只需在ajax部分使用$('#myButtonId').hide();

答案 2 :(得分:0)

function get_rain_data_list(is_load_more=0){

    if(is_load_more!=0){//if is_load_more is not 0 then get offset data from btnlod attr
     offset = $('#btn_load_more_rain').attr("data-offset");
    }else{ //set offset =0 when is_load_more is 0
     offset = 0;
    }
    var id  = $('#id').val();

    var countShow = 0;
    if(fromDate!=''){
         countShow = 1;
    }
    $.ajax({
        url: base_url+"rain_data_list_ajax",
        type: "POST",
        data:{offset:offset,propertyId:propertyId,fromDate:fromDate,toData:toData}, 
        dataType: "JSON",
        beforeSend: function() {
            show_loader();
        }, 
        success: function(data){
            hide_loader();
             // console.log(data);
            $('.proprty_load_more_btn').remove();//remove load more button 
            if(offset==0){ //clear div when offset 0
                $("#append_rain_list").html('');
            }
            if(data.no_record==0){//show data in div when no previous record 
                $("#append_rain_list").html(data.html_rain);
                 $("#add_count").html('');
                if(countShow){
                    //$("#add_count").html(data.count+data.record);
                }
            }else{
                //append data when already record show in view
                $("#append_rain_list").append(data.html_rain);
                $("#append_load_btn").append(data.btn_html);
                $("#add_count").html('');
               if(countShow){
                    $("#add_count").html(data.count+data.record);
                }
            }
        },
    }); 
} 
<div id="append_rain_list"></div>
<div id="add_count"></div>

<?php 
	function rain_data_list_ajax(){

		$limit = 6;
		$is_next = 0;
		//get and set offset
		$offset = $this->input->post('offset');
		$data['property_id'] = decoding($this->input->post('propertyId'));
		$fDate = sanitize_input_text($this->input->post('fromDate'));
		$tDate = sanitize_input_text($this->input->post('toData'));

		$new_offset = $limit+$offset; //pr($data);
		//set where
		$where = array('property_id'=>$data['property_id']);
		//set select field to get
		$data['limit'] = $limit;
		$data['offset'] = $offset;
		//get count of records
		$dataView['total_count'] = $this->Property_model->get_rain_count($data);
		//get records 
		$dataView['rain_list'] = $this->Property_model->get_rain_list($data);
		///lq();
		//check for load more btn
		//pr($dataView);
		if($dataView['total_count']>$new_offset){
		$is_next =1; 
		}
		$btn_html = '';
		if($is_next){
		//if is next =1 set load more button in btn_html
		$id = "btn_load_more_rain";
		$btn_html = '<div class="col-sm-12 text-center pt-20 proprty_load_more_btn"><button class="login-btn load load_more_btn" id = "'.$id.'" data-offset ="'.$new_offset.'" data-isNext ="'.$is_next.'" >'.lang('load_more').'</button></div>';
		}
		//load view with data
		$html_rain = $this->load->view('test1',$dataView,true);
		$response = array('status'=>1,'html_rain'=>$html_rain,'btn_html'=>$btn_html,'count'=>$dataView['total_count'],'record'=>lang('recod_found'));
		//flag for no record 
		$no_record=1;
		if(empty($dataView['rain_list'])){
		$no_record = 0;
		}
		$response['no_record'] = $no_record;
		echo json_encode($response);die;
	}
?>