搜索框不在工作

Question

我創建了一個簡單的json表與asp.net中的搜索框。我從數據庫中獲取數據我不知道我做錯了什麼，我的搜索框不工作。請有人檢查我的搜索代碼？

$(document).ready(function() { 
    $('.update').hide(); 
    $('.addRole').click(function() { 
     addRole() 
    }); 

    empRoles() 
    $(".paginate").paginga({ 
     item: "> tr", 
     itemsPerPage: 5, 
     maxPageNumbers: 2 
    }); 
    $('#searchGo').click(function() { 
     var searchVal = $('#searchroleName').val(); 
     if (searchVal == "") { 
      $('#searchroleName').addClass("error"); 
      $('.requiredField').show(); 
     } 
     else { 
      $('#searchroleName').removeClass("error"); 
      $('.requiredField').hide(); 
     } 
    }); 
    $(".searchClear").click(function() { 
     $('#searchroleName').val(""); 
     $('#roleListTable tr').show(); 
     $('.requiredField').hide(); 
     $('#searchroleName').removeClass("error"); 
    }); 
     var $rows = $('#roleListTable tr'); 
     var val = $.trim($('#searchroleName').val()).replace(/ +/g, ' ').toLowerCase(); 
     $rows.show().filter(function() { 
     var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); 
     return !~text.indexOf(val); 
    }).hide(); 
}); 

https://jsfiddle.net/ojog9uq0/

Answer 1

您的代碼是否正常工作。您只需將搜索代碼放入搜索按鈕點擊代碼的else部分。

$('#searchGo').click(function() { 

    var searchVal = $('#searchroleName').val(); 
    console.log('click ' + searchVal); 
    if (searchVal == "") { 
     $('#searchroleName').addClass("error"); 
     $('.requiredField').show(); 
    } 
    else { 
     $('#searchroleName').removeClass("error"); 
     $('.requiredField').hide(); 
     var $rows = $('#roleListTable tr'); 
     var val = $.trim($('#searchroleName').val()).replace(/ +/g, ' ').toLowerCase(); 
     console.log("trim "+val); 
     $rows.show().filter(function() { 
      var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); 
      console.log("show text "+text); 
      return !~text.indexOf(val); 
     }).hide(); 
     } 
}); 

試試看。

Working fiddle link

Answer 2

你的代碼中的jsfiddle工作的以下變化

刪除});只是function empRoles() {

除去上面這段代碼，因爲它並沒有爲它的reffrence之後，並返回一個JS錯誤

$(".paginate").paginga({ 
     item: "> tr", 
     itemsPerPage: 5, 
     maxPageNumbers: 2 
); 

Answer 3

試試這個：

Working fiddle demo

$("#searchroleName").on("keyup", function() { 
var g = $(this).val().toLowerCase(); 
$(".searchclass").find('td').each(function() { 
    var s = $(this).text().toLowerCase(); 
    $(this).closest('td')[ s.indexOf(g) !== -1 ? 'show' : 'hide' ](); 
    }); 
}); 

Answer 4

你只需要移動下面的代碼/寫入$('#searchGo').click事件

var $rows = $('#roleListTable tr'); 
    var val = $.trim($('#searchroleName').val()).replace(/ +/g, ' ').toLowerCase(); 
    $rows.show().filter(function() { 
    var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); 
    return !~text.indexOf(val); 
       }).hide(); 

var roleList=[{ 
 
"sNo"  :"1", 
 
"roleName":"Designer" 
 
}, 
 
{ 
 
"sNo"  :"2", 
 
"roleName":"Developer" 
 
}, 
 
{ 
 
"sNo"  :"3", 
 
"roleName":"HR Dept" 
 
}, 
 
{ 
 
"sNo"  :"4", 
 
"roleName":"Project Manager" 
 
} 
 
]; 
 

 
$(document).ready(function() { 
 
    $('.update').hide(); 
 
    $('.addRole').click(function() { 
 
     addRole() 
 
    }); 
 
    
 
    empRoles() 
 
    
 
    $('#searchGo').click(function() { 
 
     var searchVal = $('#searchroleName').val(); 
 
     if (searchVal == "") { 
 
      $('#searchroleName').addClass("error"); 
 
      $('.requiredField').show(); 
 
     } 
 
     else { 
 
      $('#searchroleName').removeClass("error"); 
 
      $('.requiredField').hide(); 
 
     } 
 
     
 
     var $rows = $('#roleListTable tr'); 
 
     var val = $.trim($('#searchroleName').val()).replace(/ +/g, ' ').toLowerCase(); 
 
     $rows.show().filter(function() { 
 
     var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); 
 
     return !~text.indexOf(val); 
 
    \t \t \t \t \t }).hide(); 
 
    }); 
 
    $(".searchClear").click(function() { 
 
     $('#searchroleName').val(""); 
 
     $('#roleListTable tr').show(); 
 
     $('.requiredField').hide(); 
 
     $('#searchroleName').removeClass("error"); 
 
    }); 
 
      
 
}); 
 

 
function empRoles(){ 
 
\t \t for(var i=0;i<roleList.length;i++) 
 
\t  { 
 
\t  var table='<tr id="row'+i+'"><td>'+roleList[i].sNo+'</td><td class="roleName" id="name'+i+'">'+roleList[i].roleName+'</td><td><button class="btn edit btn-info" id="edit'+i+'"><i class="fa fa-pencil"></i>Edit</button><button class="btn update btn-success" id="update'+i+'"><i class="fa fa-floppy-o"></i>Update</button><button class="btn dlt btn-danger" data-toggle="modal" data-target="#confirm"><i class="fa fa-trash-o"></i>Delete</button></td><tr>'; 
 
\t  \t $('#roleListTable').append(table) 
 
\t  } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<div class="searchRole"> 
 
       <input class="col-lg-3 col-md-3 col-sm-3 col-xs-4" type="text" name="searchroleName" id="searchroleName"> 
 
       <button class="btn btn-primary searchGo" id="searchGo">Go</button> 
 
       <button type="reset" class="btn btn-primary searchClear">Clear</button> 
 
      </div> 
 
      <div class="col-lg-12 col-md-12 col-xs-12 padding paginate table-responsive"> 
 
       <table class="table table-hover table-bordered"> 
 
        <thead class="roleListTableHead"> 
 
         <tr> 
 
          <td>S.NO</td> 
 
          <td>ROLE NAME</td> 
 
          <td>ACTION</td> 
 
         </tr> 
 
        </thead> 
 
        <tbody class="items" id="roleListTable"></tbody> 
 
       </table> 
 
       </div>