当前位置: 动力学知识库 > 问答 > 编程问答 >

jquery - Unexpected result using colvis and multisearch of datatables together

问题描述:

I am using colvis and multi search together, but it has some issue though..

Cases:

1. If I uncheck 'Rendering Engine', and use multi-search for Engine Version (e.g. with data data 6 or 7), it wont give any data.

2. for multi-serach for CSS grade, it wont search at all

I've created a jsfiddle here http://jsfiddle.net/cyVjh/

script used

//Search

$("tfoot input").keyup(function () {

/* Filter on the column (the index) of this element */

oTable.fnFilter(this.value, $("tfoot input").index(this));

});

/*

* Support functions to provide a little bit of 'user friendlyness' to the textboxes in

* the footer

*/

$("tfoot input").each(function (i) {

asInitVals[i] = this.value;

});

$("tfoot input").focus(function () {

if (this.className == "search_init") {

this.className = "";

this.value = "";

}

});

$("tfoot input").blur(function (i) {

if (this.value == "") {

this.className = "search_init";

this.value = asInitVals[$("tfoot input").index(this)];

}

});

网友答案:

I also faced same issue and found one solution for the same.

We need to manually pass column id in search text box in view (HTML) file

like EG.

<table cellpadding="0" cellspacing="0" border="0" id="listingentries">
  <thead>
    <tr>
      <td>column1<td>
      <td>column2<td>
      <td>column3<td>
    </tr>
  </thead>

  <tbody>
    <tr> 
      <td>val1<td>
      <td>val2<td>
      <td>val3<td>
    </tr>
    .
    .
    .
  </tbody>

  <tfoot>
    <tr>

      <!-- HERE I HAVE ADDED ID TO TEXT BOXES WHICH SHOWS COLUMNS SEQUENCE -->

      <td><input id='0' type='text' title='Search column 1' /><td>
      <td><input id='1' type='text' title='Search column 2' /><td>
      <td><input id='2' type='text' title='Search column 3' /><td>
    </tr>
  </tfoot>
</table>

Now We need to change in JS script like this:

//Search 
$("tfoot input").keyup(function () {
    /* Filter on the column (the index) of this element */

    //COMMENT THIS LINE
    //oTable.fnFilter(this.value, $("tfoot input").index(this));

    //USE THIS - HERE WE WILL PASS ID WHICH IDENTIFY COLUMN INDEX
    oTable.fnFilter(this.value, this.id); 

});

This is working for my side.

This will work for both Normal Javascript search and also worked for Server side search.

Hope This work for you too.

Thank you.

分享给朋友:
您可能感兴趣的文章:
随机阅读: