Html 带有基于表列的输入框的表过滤器_Html_Json

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

html json

Html 带有基于表列的输入框的表过滤器,html,json,Html,Json,我有一个表格，输入文本框和带有分页和外部json的下拉列表，我需要根据下拉选项的选择进行搜索，一旦我们选择下拉选项“description”并在输入框上键入任何内容，则应根据描述进行搜索，下面是代码 HTML JAVASCRIPT 我从js fiddle获得了解决方案，并使用外部json和带有datatables插件的ajax调用对其进行了修改，仅供将来需要此需求时参考 <!DOCTYPE html> <html lang="en"> <head>

我有一个表格，输入文本框和带有分页和外部json的下拉列表，我需要根据下拉选项的选择进行搜索，一旦我们选择下拉选项“description”并在输入框上键入任何内容，则应根据描述进行搜索，下面是代码

HTML JAVASCRIPT

我从js fiddle获得了解决方案，并使用外部json和带有datatables插件的ajax调用对其进行了修改，仅供将来需要此需求时参考

    <!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>

var测试=成员成员来自哪里？它似乎未定义。Hello@ankush，请删除与您的问题无关的代码（即注释代码、外部库、JSON的较小预览…），并添加您收到的错误，以便我们可以更有效地帮助您。我已根据要求编辑了我的问题。有人可以帮助我吗，提前谢谢
.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;
}

<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>

[{
            "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"
        }


    ]

    <!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>

 $.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();
}); 
*/
}); 

[{
            "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"
        }


    ]