表格过滤器，带有基于表格列的输入框

时间：2018-03-13 14:27:23

标签： html json

我有一个表格，输入文本框以及带有分页和外部json的下拉菜单，我需要根据下拉选项的选择进行搜索，一旦我们选择了下拉选项＆＃39; description＆＃39;和键盘输入框上的任何内容然后搜索应该基于描述发生，这里是下面的代码

HTML 

<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.js'></script>
<input placeholder="search" type="text"/><select><option>Name</option><option>description</option></select>
  <table id="table"  data-show-header="true" data-pagination="true"
           data-id-field="name"
           data-page-list="[5, 10, 25, 50, 100, ALL]"
           data-page-size="5">
    <thead><tr><th>Name</th><th>stargazers_count</th><th>forks_count</th><th>description</th></tr></thead>
  <tbody>

    </tbody>
</table>

CSS 

.pagination .active a {
    width: 40px;
    height: 34px;
    -webkit-transform: skew(-21deg);
    position: relative;
  overflow: hidden;
    background: red;    
}

.pagination .active span{
-webkit-transform: skew(0deg) !important;
width: 40px !important;
height: 34px !important;


}
.pagination>li>a{
    width: 40px;
    height: 34px;
    -webkit-transform: skew(-21deg);

    background: #fff;
}
.pagination > li.page-pre >a,.pagination > li.page-next >a {
    width: 85px !important;

}
.fixed-table-pagination div.pagination{
margin-right:20px;
}
.pagination-detail{
display:none;
}
.major{
    background-color:green;
}

.critical{
    background-color:orange;
}

JAVASCRIPT 

<script>

    $.ajax({
        url: "http://localhost/bspaginationtable/ext-json/members.json", 
        type: "POST",    
        dataType:"json",   
        success: function (response) 
        {
         // var trHTML = '';
          $.each(response, function (key,value) {
             $('table#table TBODY').append('<tr><td>'+value.name+'</td><td>'+value.stargazerscount +'</td><td class="'+ value.forkscount +'"><span>'+value.forkscount +'</span></td><td>'+value.description +'</td></tr>');    
          });

           // $('#table').append(trHTML);
        }   
    });

$(function () {
    $('#table').bootstrapTable({
       // data: data
    });
});
  </script>

members.json 

[{
            "name": "mango",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "fruits"
        },
        {
            "name": "brinjal",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "vagetables"
        },
        {
            "name": "grapes",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "fruits"
        },
        {
            "name": "soap",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "groceries"
        },
        {
            "name": "dates",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "dryfruits"
        },
        {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
        {
            "name": "shirt",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "clothes"
        }


    ]

1 个答案:

答案 0 :(得分：0)

我从js小提琴获得解决方案并使用带有datatables插件的ajax调用使用外部json修改它，如果有人需要这个要求，仅供将来参考。

    <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
<style>
.dataTables_paginate  .current {
    width: 40px;
    height: 34px;
    -webkit-transform: skew(-21deg);
    position: relative;
  overflow: hidden;

   border-left:0px  !important;
}
.dataTables td{
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
}
.dataTables_paginate .paginate_button {
    width: 40px;
    height: 34px;
    -webkit-transform: skew(-21deg);
    position: relative;
  overflow: hidden;
   border-right:1px solid #000 !important;
   margin-left:0 !important;
}
.dataTables_paginate .previous{
    width:87px;
    background:none;

}
.dataTables_paginate .next{
width:60px;
    background:none;

}
.dataTables_paginate .next{
border-right:0 !important;
}

a:focus {
    outline:0;
    outline-offset:0;
}
.dataTables_wrapper .dataTables_paginate {
    float: right;
    text-align: right;
    padding-top: 0.25em;
    margin-right: 5%;
}
.dataTables_paginate>a{
    width: 40px;
    height: 34px;
    -webkit-transform: skew(-21deg);

    background: #red !important ;
}
.dataTables_paginate>a:hover{

}

.major{
   border-top:2px solid green;

}

.critical{
    border-top:2px solid red;
}
.minor{
    border-top:2px solid orange;
}
.critical,.major,.critical-box,.major-box{

padding:3px;
cursor:pointer;
}       
</style>  
<script type="text/javascript" charset="utf8" src="js/script.js"></script>
<script>
$(document).ready( function () {
   // $('#example').DataTable();
   var tables = $('#example').DataTable({

   dom : '2<"#add">frtip',
    "language": {
    "paginate": {
      "previous": "<&nbsp;Previous",
      "next": "next&nbsp;>"
    }
  }

})
$('<label/>').text('Search Column:').appendTo('#add')
$select = $('<select/>').appendTo('#add')

$('<option/>').val('All').text('All').appendTo($select);
$('<option/>').val('0').text('name').appendTo($select);
$('<option/>').val('1').text('stargazerscount').appendTo($select);
$('<option/>').val('2').text('forkscount').appendTo($select);
$('<option/>').val('3').text('description').appendTo($select);
$('input[type="search"]').on( 'keyup change', function () {
  var searchValue = $(this).val();
  var columnSearch = $select.val();

  if(columnSearch == 'All'){
    tables.search(searchValue).draw();
  } else {
    tables.columns(columnSearch).search(searchValue).draw();
  }
 });  

$("div").delegate(".major-box", "click", function(){

    var majorValue = $(this).attr('id');

    if(majorValue== 'major'){
    tables.search(majorValue).draw();
  }

});
$("div").delegate(".critical-box", "click", function(){

    var criticalssValue = $(this).attr('id');

    if(criticalssValue== 'critical'){
    tables.search(criticalssValue).draw();
  }

});
} );
</script>
</head>
<body>
<div class="col-md-12">
<div class="col-md-6 critical-box" id="critical">critical</div><div id="major" class="col-md-6 major-box">major</div>
</div>
 <table id="example">
        <thead>
            <tr>
                <th>name</th>
                <th>stargazerscount</th>
                <th>forkscount</th>
                <th>description</th>

            </tr>
        </thead>



        <tbody>

        </tbody>
    </table>


</body>
</html>

的script.js 

 $.ajax({
        url: "http://localhost/bootstrap-tablefilter/js/members.json", 
        type: "POST",    
        dataType:"json",   
        success: function (response) 
        {
         // var trHTML = '';
          $.each(response, function (key,value) {
             $('table#example TBODY').append('<tr><td>'+value.name+'</td><td>'+value.stargazerscount +'</td><td ><span class="'+ value.forkscount +'">'+value.forkscount +'</span></td><td>'+value.description +'</td></tr>');    
          });

           // $('#table').append(trHTML);
        }   
    });

$(document).ready( function () {

$('#example tbody tr td span.critical').closest('tr').addClass('critialrow');   
$('#example tbody tr td span.major').closest('tr').addClass('majorrow');
/*
$("div").delegate(".critical-box", "click", function(){

    //$('#example').DataTable().destroy().clear();
$('.critialrow').show();
$('.majorrow').hide();
}); 
$("div").delegate(".major-box", "click", function(){
//alert('hi');
$('.critialrow').hide();
$('.majorrow').show();
}); 
*/
});

members.json 

[{
            "name": "mango",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "fruits"
        },
        {
            "name": "brinjal",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "vagetables"
        },
        {
            "name": "grapes",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "fruits"
        },
        {
            "name": "soap",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "groceries"
        },
        {
            "name": "dates",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "dryfruits"
        },
        {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
        {
            "name": "shirt",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "clothes"
        },
        {
            "name": "dates",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "dryfruits"
        },
        {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
        {
            "name": "shirt",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "clothes"
        },
        {
            "name": "shirt",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "clothes"
        },
        {
            "name": "dates",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "dryfruits"
        },
        {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
        {
            "name": "shirt",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "clothes"
        },
        {
            "name": "dates",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "dryfruits"
        },
        {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
         {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
         {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
         {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
         {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
         {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
         {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
         {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
        {
            "name": "shirt",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "clothes"
        }


    ]
相关问题
最新问题