таблица Jquery данные алфавитного фильтр

JQuery DataTable пользовательского Filterationтаблица Jquery данные алфавитного фильтр

Вот мой JQuery DataTable. Мне нужен альфа-фильтр в моей таблице. Я использую метод ajax для данных фильтра из базы данных. Но у меня есть некоторые проблемы. Когда я фильтрую данные, «отображение записей результатов» в jQuery datatable не изменяется в зависимости от моей фильтрации. Если какая-либо другая идея сменить фильтрацию.

table.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" 
    pageEncoding="ISO-8859-1"%> 

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql" %> 
<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="resources/css/dataTables.bootstrap.min.css"> 
     <script src="resources/js/jquery-1.11.3.min.js"></script> 
      <script src="resources/js/dataTables.bootstrap.min.js"></script> 
     <title>SMART CAMPUS</title> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="panel panel-primary"> 
       <div class="panel-heading text-center" id="header"> 
       Customer Details 
       </div> 
       <div class="panel-body"> 
        <div class="well" id="well"> 
             <form role="form" action="" method="post" class="form-horizontal" id="myForm"> 

           <table class=" display nowrap table table-bordered " id="myTable"> 
            <thead id="th"> 
             <tr> 
              <th class="text-center">Select</th> 
              <th class="text-center">Customer Name</th> 
              <th class="text-center">Storage Location</th> 
              <th class="text-center">Location</th> 
              <th class="text-center">Customer Address</th> 
             </tr> 
            </thead> 
            <tbody> 
             <c:forEach var="row" items="${result}"> 
            <tr id="odd"> 
             <td><input type="checkbox" name="checkId" class ="checkId" id="checkId" value=${row.id }>${row.id }</td> 
             <td class="text-center">${row.name }</td> 
             <td class="text-center">${row.storage }</td> 
             <td class="text-center">${row.location }</td> 
             <td class="text-center">${row.address }</td> 
             </tr> 
            </c:forEach> 
            </tbody> 
           </table> 
           <div class="col-md-offset-1"> 
           <ul class="pagination" id="filterButton"> 
            <li><a href="#" onclick="loadEquipementModelStartwith('0')">All</a></li> 
            <li><a href="#" onclick="loadEquipementModelStartwith('A')">A</a></li> 
            <li><a href="#" onclick="loadEquipementModelStartwith('B')">B</a></li> 
            <li><a href="#" onclick="loadEquipementModelStartwith('C')">C</a></li> 
            <li><a href="#" onclick="loadEquipementModelStartwith('D')">D</a></li> 
            <li><a href="#" onclick="loadEquipementModelStartwith('E')">E</a></li> 
            <li><a href="#" onclick="loadEquipementModelStartwith('F')">F</a></li> 
            <li><a href="#" onclick="loadEquipementModelStartwith('G')">G</a></li> 
            <li><a href="#" onclick="loadEquipementModelStartwith('H')">H</a></li> 
            <li><a href="#" onclick="loadEquipementModelStartwith('I')">I</a></li> 
            <li><a href="#" onclick="loadEquipementModelStartwith('J')">J</a></li> 
            <li><a href="#" onclick="loadEquipementModelStartwith('K')">K</a></li> 
            <li><a href="#" onclick="loadEquipementModelStartwith('L')">L</a></li> 
            <li><a href="#" onclick="loadEquipementModelStartwith('M')">M</a></li> 
            <li><a href="#" onclick="loadEquipementModelStartwith('N')">N</a></li> 
            <li><a href="#" onclick="loadEquipementModelStartwith('O')">O</a></li> 
            <li><a href="#" onclick="loadEquipementModelStartwith('P')">P</a></li> 
            <li><a href="#" onclick="loadEquipementModelStartwith('Q')">Q</a></li> 
            <li><a href="#" onclick="loadEquipementModelStartwith('R')">R</a></li> 
            <li><a href="#" onclick="loadEquipementModelStartwith('S')">S</a></li> 
            <li><a href="#" onclick="loadEquipementModelStartwith('T')">T</a></li> 
            <li><a href="#" onclick="loadEquipementModelStartwith('U')">U</a></li> 
            <li><a href="#" onclick="loadEquipementModelStartwith('V')">V</a></li> 
            <li><a href="#" onclick="loadEquipementModelStartwith('W')">W</a></li> 
            <li><a href="#" onclick="loadEquipementModelStartwith('X')">X</a></li> 
            <li><a href="#" onclick="loadEquipementModelStartwith('Y')">Y</a></li> 
            <li><a href="#" onclick="loadEquipementModelStartwith('Z')">Z</a></li> 
           </ul> 
           </div> 
           <a class="btn btn-success col-md-offset-5" href="add"><span class="glyphicon glyphicon-plus"></span>Add</a> 
           <a class="btn btn-warning" id="edit"><span class="glyphicon glyphicon-edit"></span>Edit</a> 
           <a class=" btn btn-danger" onclick="delete_validate()" id="delete"><span class="glyphicon glyphicon-remove"></span>Delete</a> 
         </form> 
         <!-- <button class="btn-primary" id="filterButton">Filter</button>--> 

        </div> 
       </div> 
      </div> 
     </div> 

     <!-- JavaScript --> 

     <script> 

     //For DataTable 
$(document).ready(function() { 
    $('#myTable').DataTable({ 
}); 

function callAjaxMethod(type,url,param,successMethod) 
{ 
    try 
    { 
     $.ajax({ 
      url:url, 
      type:type, 
      data:param, 
      success:function(result) 
      { 
       successMethod(result); 
      } 
     }); 
    } 
    catch(err) 
    { 
     alert(err) 
    } 
} 
//Loading data 
/* This function used for sorting based on the letter */ 
function loadEquipementModelStartwith(letter) 
{ 
    try 
    { 
     var param = {"startLetter":letter}; 
     callAjaxMethod("POST","sortEquipmentModel",param,startwithEquipmentModel); 
    } 
    catch(err) 
    { 
     alert(err); 
    } 
} 
function startwithEquipmentModel(result) 
{ 
    try 
    { 
     alert(result.length); 

      var rowLength = result.length; 
     var content=""; 
     var id,name,storage,location,address; 

     if(rowLength === 0) 
     { 
      content += "<tr><td colspan='4' class = 'star'><center><b> Data not found...</b></center></td></tr>"; 
     } 
     else 
     { 
      for (var index = 0;index<rowLength;index++) 
      { 
       try 
       { 
        id = result[index].id; 
        name = result[index].name; 
        storage = result[index].storage; 
        location = result[index].location; 
        address = result[index].address; 

        content += "<tr>"; 
        content += "<td>"+(index+1)+". <input type='checkbox' name='equTypeId' class ='checkList' value= '"+id+"'></td>"; 
        content += "<td>"+name+"</td>"; 
        content += "<td>"+storage+"</td>"; 
        content += "<td>"+location+"</td>"; 
        content += "<td>"+address+"</td>"; 
        content += "</tr>"; 
       } 
       catch(err) 
       { 
        alert(err.desc); 
       } 
      } 
     } 
     $('#myTable tbody').html(content); 
    } 
    catch(err) 
    { 
     alert(err.desc); 
    } 
} 
     </script> 
    </body> 
</html>

UsersDAO.java

public List<Users> sortData(String letter) 
{ 
    String sql= ""; 
    sql = "SELECT id a, name b ,storage c ,location d ,address e from customer where name is not null"; 
    if(!"0".equals(letter)) 
     sql += " AND name LIKE '"+letter+"%'"; 
    System.out.println(sql); 
    return jdbc.query(sql,new listRowMapper()); 
} 

private static final class listRowMapper implements RowMapper<Users> 
{ 
    public Users mapRow(ResultSet rs,int rowNum)throws SQLException 
    { 
     Users user=new Users(); 
     user.setId(rs.getInt(1)); 
     user.setName(rs.getString(2)); 
     user.setStorage(rs.getString(3)); 
     user.setLocation(rs.getString(4)); 
     user.setAddress(rs.getString(5)); 
     return user; 
    } 
}

controller.java

@RequestMapping(value = "/sortEquipmentModel",method = RequestMethod.POST) 
@ResponseBody 
public List<Users> sortData(@RequestParam Map<String,String> request,Model model) 
{ 
    String startwith = request.get("startLetter"); 
    List<Users> users = userdao.sortData(startwith); 

    Collections.sort(users,new Comparator<Users>(){ 
      @Override 
      public int compare(Users s1, Users s2) { 
       // TODO Auto-generated method stub 
       return s1.getName().compareToIgnoreCase(s2.getName()); 
      } 
     }); 
    System.out.println(users.isEmpty()); 
    System.out.println(users.size()); 
    System.out.println(users); 
    return users; 
}

источник

2015-09-03 sabarikumar

вы не пе ed для использования ajax для этой цели. просто используйте загрузочный стол и Data table. она автоматически добавит фильтр, разбиение на страницы, сортировка передать этот for full description HTML как

<table cellpadding="0" cellspacing="0" border="0" class="bordered-table zebra-striped dataTable no-footer" id="example" role="grid" aria-describedby="example_info"> 
//rows here 
</table>

JQuery

if($('#example').length > 0) 
    { 
     landing_table = $('#example').DataTable 
     ({ 
      "bJQueryUI": false, 
      "bAutoWidth": true, 
      "iDisplayLength": 5, 
      "sPaginationType": "full_numbers", 
      "aLengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]], 
      "sDom": '<"datatable-header"fl>t<"datatable-footer"ip>', 
      "oLanguage": 
      { 
        "sLengthMenu": "<span>Show entries:</span> _MENU_" 
      }, 
      "stateSave": true, 
      "stateDuration": 60 * 60 * 24, 
      "aaSorting": [[ 0, "desc" ]], 

     }); 

    }

источник

2015-09-03 12:57:05 MKD

мне нужен алфавитный фильтр для моего datatable.when я нажмите «A» фильтр таблицы данных и показывает данные, начинающиеся с «A». Во время фильтрации отображаемые записи изменялись на основе фильтрации. – sabarikumar

таблица Jquery данные алфавитного фильтр

ответ

Смежные вопросы