jquery实现前端分页、select筛选框、查询条件展示效果

jquery实现前端分页、select筛选框、查询条件展示效果：以前做的筛选条件是用很笨的方法实现的，如果筛选条件（select）的value值超多的话，我使用的是switch循环的方法，导致代码冗余，最多需要几百行代码或上千行代码实现功能需求，代码质量很低。现在使用的是自己写的函数封装的方法，只是js代码最多也就150多行，实现分页、select筛选框、查询条件，希望对前端初级开发人员和前端小白又帮助。

实际效果：查看入口：查看方式

我的github完整代码：

js代码：https://github.com/eight1302/select_query_page

//分页展示数据
var page = 10;


//页面title（标题展示）
var title = \'<div class="col-md-2 col-sm-2 col-xl-2 id">序号</div>\'+
\'<div class="col-md-2 col-sm-2 col-xl-2 name">名字</div>\'+
\'<div class="col-md-2 col-sm-2 col-xl-2 age">年龄</div>\'+
\'<div class="col-md-2 col-sm-2 col-xl-2 school">毕业院校</div>\'+
\'<div class="col-md-2 col-sm-2 col-xl-2 professional">学习专业</div>\'+
\'<div class="col-md-2 col-sm-2 col-xl-2 operation">操作</div>\';
$(".title").append(title);


//分页函数


function page_func(date){
    $.each(date, function(idx,obj){
        if(idx<page){
            dateinfo(obj)
        }
    }); 
    var content=date.length;       //总数
    var pageTotal=Math.ceil(content/page);  //分页数量
    var html=\'<ul class="pagination" style="margin:0;" id="page2"></ul>\';
    $(".page-left").append(html);
    Page({
        num:pageTotal,             //页码数
        startnum:1,
        pagesize:page,             //每页显示的数量
        elem:$(\'#page2\'),       //指定的元素
        callback:function(n){   //回调函数 
            pagination(n,date);     
        }
    });
}


$.getJSON({  
    type: "GET",
    url:"../js/date.json",  
    async: false, 
    cache:false,
    dataType:"json", 
    success: function(e) {
        if(e.date.date_list.length==0){
        alert("暂无数据4！");
        return;
        }
       page_func(e.date.date_list)


       //筛选框
        $("#select_school").change(function(){
            var name = $(this).children(\'option:selected\').val();
            var item =e.date.date_list;
            select(name,item)
        });
    }
});


//表单数据
function dateinfo(obj){
  var detail =\'<div class="col-md-12 col-sm-12 col-xl-12 page_detail">\'+ 
\'<div class="col-md-2 col-sm-2 col-xl-2 id">\'+obj.id+\'</div>\'+
\'<div class="col-md-2 col-sm-2 col-xl-2 name">\'+obj.name+\'</div>\'+
\'<div class="col-md-2 col-sm-2 col-xl-2 age">\'+obj.age+\'</div>\'+
\'<div class="col-md-2 col-sm-2 col-xl-2 school">\'+obj.school+\'</div>\'+
\'<div class="col-md-2 col-sm-2 col-xl-2 professional">\'+obj.professional+\'</div>\'+
\'<div class="col-md-2 col-sm-2 col-xl-2 delete">删除</div>\'+
\'</div>\';
$(".page_info").append(detail);
}


//页数控制
function pagination(num,list){
$(".page_info").html(\'\');
$.each(list, function(idx,obj){
if(idx>=((num-1)*page) && idx<(num*page)){
dateinfo(obj);
}
    });
}


//删除数据
$(".page_info").on(\'click\',\'.delete\',function(){
    var id= $(this).parent().find(".id").html();
    var name= $(this).parent().find(".name").html();
    var age= $(this).parent().find(".age").html();
    var school= $(this).parent().find(".school").html();
    var professional= $(this).parent().find(".professional").html();
    alert("请确定要删除序号=="+id+",名称=="+name+",年龄=="+age+",毕业院校=="+school+",所学专业=="+professional);
    $(this).parent().remove();
})


var data = ["北京大学","清华大学","南开大学","北京邮电大学","东北工业大学","北京理工大学","北京交通大学","北京交通大学海滨学院"];
//筛选框展示
 $.each(data, function(idx,obj){
    var se_html = \'<option value="\'+obj+\'">\'+obj+\'</option>\'; 
    $(".select").append(se_html);
}); 


function select(name,item){
     var sol =[];
    $(".page_info").empty();
    $.each(item, function(idx,obj){
        var school = obj.school;
        if(name == school){ 
            sol.push(item[idx]);
        }
    }); 
    page_func(sol)
}


//查询条件
$(".query").on(\'click\',function(){
    var name = $("#name").val();
    $.getJSON({  
        type: "GET",
        url:"../js/date.json",  
        async: false, 
        cache:false,
        dataType:"json", 
        success: function(e) {
            if(e.date.date_list.length==0){
                alert("暂无数据4！");
                return;
            }
           page_func(e.date.date_list)
           var item =e.date.date_list;
           query(name,item)
        }
    });
});


function query(name,item){
    var query =[];
    $(".page_info").empty();
    $.each(item, function(idx,obj){
        var person_name = obj.name;
        if(name == person_name){ 
            query.push(item[idx]);
        }
    }); 
    page_func(query)
}