Javascript 如何在以下datatable的所有列字段中添加自定义搜索筛选器

我的控制器：

 public class SortOfContactListController {
        public List<Contact> ContactListTable {get; set;}
        public String ExpressionOfSort = 'name';
        public String DirectionOfSort = 'ASC';

        public SortOfContactListController() {
            ContactListTable = new List<Contact>();
        }
        public String ExpressionSort {
            get {
                return ExpressionOfSort;
            }
            set {
                If(value == ExpressionOfSort) {
                    DirectionOfSort = (DirectionOfSort == 'ASC')? 'DESC' : 'ASC';
                }
                else {
                    DirectionOfSort = 'ASC';
                    ExpressionOfSort = value;
                }
            }

        }

        public String getDirectionOfSort() {
            If(ExpressionOfSort == Null || ExpressionOfSort == '') {
                return 'DESC';
            }
            else {
                return DirectionOfSort;
            }
        }

        public void setDirectionOfSort(String value) {
            DirectionOfSort = value;
        }

        public List<Contact>getContacts() {
            return ContactListTable;
        }

        public PageReference ViewData() {
            String FullSortExpression = ExpressionOfSort + ' ' + DirectionOfSort;
            system.debug('ExpressionOfSort:::::'+ExpressionOfSort);
            system.debug(DirectionOfSort);

            //String Queryitem = new String();
           String Queryitem = 'SELECT Id, Name, Account.Name, Birthdate, Phone, Email, MailingCity, MailingCountry, MailingPostalCode FROM Contact WHERE Account.Name != Null ORDER BY ' + FullSortExpression + ' Limit 1000';

            ContactListTable = DataBase.query(Queryitem);
            system.debug(ContactListTable);
            return Null;
        }
    }

公共类SortoContactListController{
公共列表ContactListTable{get；set；}
公共字符串ExpressionOfSort='name'；
公共字符串DirectionOfSort='ASC'；
公共SortoContactListController（）{
ContactListTable=新列表（）；
}
公共字符串表达式排序{
得到{
返回ExpressionOfSort；
}
设置{
如果（值==ExpressionOfSort）{
DirectionOfSort=（DirectionOfSort='ASC'）？'DESC'：'ASC'；
}
否则{
DirectionOfSort='ASC'；
ExpressionOfSort=值；
}
}
}
公共字符串getDirectionOfSort（）{
If（ExpressionOfSort==Null | | ExpressionOfSort==“”）{
返回'DESC'；
}
否则{
返回方向排序；
}
}
public void setDirectionOfSort（字符串值）{
DirectionOfSort=值；
}
公共ListgetContacts（）{
返回ContactListTable；
}
公共页面引用ViewData（）{
字符串FullSortExpression=ExpressionOfSort+“”+DirectionOfSort；
system.debug（'ExpressionOfSort:；
系统调试（DirectionOfSort）；
//字符串Queryitem=新字符串（）；
String Queryitem='选择Id、姓名、帐户名、生日、电话、电子邮件、MailingCity、MailingCountry、MailingPostalCode FROM Contact WHERE Account.Name！=由'+FullSortExpression+'限制1000'指定的空订单；
ContactListTable=DataBase.query（Queryitem）；
系统调试（ContactListTable）；
返回Null；
}
}

我的可视页面：

<apex:page controller="SortOfContactListController" action="{!ViewData}"  >
    <apex:form >
        <apex:sectionHeader title="ListOfContacts With Accounts"/>
        <apex:pageBlock >
            <apex:pageBlockTable value="{!ContactListTable}" var="contact" rendered="{!NOT(ISNULL(ContactListTable))}" id="cmdsort">

                 <apex:column >
                     <apex:facet name="header">   
                       <apex:commandLink action="{!ViewData}" value="Contact Name{!IF(ExpressionSort=='name',IF(DirectionOfSort == 'ASC', '▼', '▲'),'')}">
                         <apex:param value="name" name="column" assignTo="{!ExpressionSort}" ></apex:param>
                       </apex:commandLink>
                     </apex:facet>
                     <apex:outputLink value="/{!contact.Id}" target="_blank">{!contact.Name}</apex:outputLink>
                  </apex:column>

                  <apex:column value="{!contact.Account.Name}">
                     <apex:facet name="header">
                       <apex:commandLink action="{!ViewData}" value="Account Name{!IF(ExpressionSort=='Account.Name',IF(DirectionOfSort == 'ASC','▼','▲'),'')}">
                         <apex:param value="Account.Name" name="column" assignTo="{!ExpressionSort}" ></apex:param>
                       </apex:commandLink>
                     </apex:facet>
                  </apex:column>

                  <apex:column value="{!contact.Birthdate}">
                     <apex:facet name="header">
                       <apex:commandLink action="{!ViewData}" value="Birth Date{!IF(ExpressionSort=='Birthdate',IF(DirectionOfSort == 'ASC','▼','▲'),'')}">
                         <apex:param value="Birthdate" name="column" assignTo="{!ExpressionSort}" ></apex:param>
                       </apex:commandLink>
                     </apex:facet>
                  </apex:column>

                  <apex:column value="{!contact.Phone}">
                     <apex:facet name="header">
                       <apex:commandLink action="{!ViewData}" value="Phone{!IF(ExpressionSort=='Phone',IF(DirectionOfSort == 'ASC','▼','▲'),'')}">
                         <apex:param value="Phone" name="column" assignTo="{!ExpressionSort}" ></apex:param>
                       </apex:commandLink>
                     </apex:facet>
                  </apex:column>

                  <apex:column value="{!contact.Email}">
                     <apex:facet name="header">
                       <apex:commandLink action="{!ViewData}" value="Email{!IF(ExpressionSort=='Email',IF(DirectionOfSort == 'ASC','▼','▲'),'')}">
                         <apex:param value="Email" name="column" assignTo="{!ExpressionSort}" ></apex:param>
                       </apex:commandLink>
                     </apex:facet>
                  </apex:column>

                  <apex:column value="{!contact.MailingCity}">
                     <apex:facet name="header">
                       <apex:commandLink action="{!ViewData}" value="Mailing City{!IF(ExpressionSort=='MailingCity',IF(DirectionOfSort == 'ASC','▼','▲'),'')}">
                         <apex:param value="MailingCity" name="column" assignTo="{!ExpressionSort}" ></apex:param>
                       </apex:commandLink>
                     </apex:facet>
                  </apex:column>

                  <apex:column value="{!contact.MailingCountry}">
                     <apex:facet name="header">
                       <apex:commandLink action="{!ViewData}" value="Mailing Country{!IF(ExpressionSort=='MailingCountry',IF(DirectionOfSort == 'ASC','▼','▲'),'')}">
                         <apex:param value="MailingCountry" name="column" assignTo="{!ExpressionSort}" ></apex:param>
                       </apex:commandLink>
                     </apex:facet>
                  </apex:column>

                  <apex:column value="{!contact.MailingPostalCode}">
                     <apex:facet name="header">
                       <apex:commandLink action="{!ViewData}" value="Mailing Postal Code{!IF(ExpressionSort=='MailingPostalCode',IF(DirectionOfSort == 'ASC','▼','▲'),'')}">
                         <apex:param value="MailingPostalCode" name="column" assignTo="{!ExpressionSort}" ></apex:param>
                       </apex:commandLink>
                     </apex:facet>
                  </apex:column>

            </apex:pageBlockTable>            
        </apex:pageBlock>        
    </apex:form>
</apex:page>

{！contact.Name}

在这里，我尝试按升序和降序排列每一列，直到现在。但我正试图得到一个搜索栏

为每一列填写详细信息并单击按钮，我在表中获得了相应的数据

那就是说我不知道怎么做，请帮帮我

这里为您的帮助，每一列都要通过变量关键字的方式传递到名称，即更新到动态查询页面到控制器，以产生升序和降序，所以我的要求是在他们回答时也要注意动态查询方式的答案