Question

我有一个数据表表工作得很好，现在我想添加一个额外的元素。用户可以移动滑块以选择范围，单击搜索，并且该表仅返回具有该范围内特定列值的那些行。

以下是过滤的脚本：

  $.fn.dataTable.ext.search.push(
  function( settings, data, dataIndex ) {
    var min = parseInt( $('.leftLabel').val(), 10 );
    var max = parseInt( $('.rightLabel').val(), 10 );
    var score = parseFloat( data[11] ) || 0; 

    if ( ( isNaN( min ) && isNaN( max ) ) ||
         ( isNaN( min ) && score <= max ) ||
         ( min <= score  && isNaN( max ) ) ||
         ( min <= score   && score <= max ) )
    {
        return true;
    }
    return false;
    }
 );
$(document).ready(function() {
$('#slider_search').click(function () {
var table = $('#total_datatable').DataTable();
    table.draw(); 
} );
});

这是最初绘制表格的脚本：

$(document).ready(function() {

$("#total_datatable").DataTable({
 "serverSide": true,
  "ajax": {

    "url":"compare_2.php",
    "type":"GET"
 }  ,


   "paging":        true, 

   "pageLength": 100,
 "order": [[ 10, "asc" ],[11,"desc"],[1,"asc"]],
  "aoColumns": [
 { "bSortable": true, "width": "0%", "sClass": "lang_body_2", "sTitle": "Provider ID" },
 { "bSortable": true,  "width": "20%", "sClass": "lang_body_2", "sTitle": "Hospital Name" },
  { "bSortable": true, "width": "20%", "sClass": "lang_body_2",  "sTitle": "Address","visible":false    },
 { "bSortable": true, "width": "20%","sClass": "lang_body_2","sTitle": "City" },
 { "bSortable": true, "width": "20%", "sClass": "lang_body_2", "sTitle": "State",},
 { "bSortable": true, "width": "20%", "sClass": "lang_body_2", "sTitle": "ZIP Code"},
  { "bSortable": true, "width": "20%","sClass": "lang_body_2","sTitle": "County","visible":false  },
  { "bSortable": true, "width": "0%", "sClass": "lang_body_2", "sTitle": "Phone","visible":false },
 { "bSortable": true,  "width": "20%", "sClass": "lang_body_2", "sTitle": "Condition"},
  { "bSortable": true, "width": "20%", "sClass": "lang_body_2",  "sTitle": "Measure ID"},
 { "bSortable": true, "width": "20%","sClass": "lang_body_2","sTitle": "Measure Name" },
 { "bSortable": true, "width": "20%", "sClass": "lang_body_2", "sTitle": "Score",},
 { "bSortable": true, "width": "20%", "sClass": "lang_body_2", "sTitle": "Sample"},
  { "bSortable": true, "width": "20%","sClass": "lang_body_2","sTitle": "Footnote","visible":false  },
  { "bSortable": true, "width": "20%", "sClass": "lang_body_2", "sTitle": "Measure  Start","visible":false },
  { "bSortable": true, "width": "20%", "sClass": "lang_body_2", "sTitle": "Measure End","visible":false },
  { "bSortable": true, "width": "20%","sClass": "lang_body_2","sTitle": "Index","visible":false  },

  ],
  "sDom": 'f<"clear">rtip',

});

});

滑块值填充在此处：

<div class="leftLabel" style="display:inline-block;"></div>  
<div class="rightLabel" style="display:inline-block;"></div>

应该发生的是，在选择滑块值并单击#slider_search按钮后，表格应使用与原始表格相同的设置重绘，但会过滤到特定的行。我之前使用过此range filtering，我的脚本就是基于此。我尝试使用像Datatables这样的输入框来实现它并且它可以工作，但是我希望它能够根据滑块值工作，并且只有当用户点击搜索时（示例在您输入后立即更新表格）。

所以，问题是：我做错了什么导致这不能以我正在寻找的方式工作？

任何方向都会受到赞赏。

按滑块值过滤数据表值不起作用

0 个答案: