Range Filtering on multiple tables
Range Filtering on multiple tables
Hello,
i hope somebody can help me.
I create two tables and for each table one input field with filtering range and jquerui slider.
If i move the slider for the first table than it redraw the first table.
If i move the slider for the second table than he want to redraw the first table but not the second.
But if i click in the second table on table head, than he redraw the second table.
Tables
[code]
....
...
[/code]
Script datatable
[code]
var oTable;
$(document).ready(function() {
oTable = $('.dataTable').dataTable({
....
....
[/code]
script to filter
(in aData[0] is the id of range input field)
[code]
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
var temp="x"+aData[0];
var element=document.getElementById(temp);
var iMin = element.value * 1;
....
....
[/code]
and here i call the function to redraw datatable
[code]
$(function() {
$('.slidertf').each(function(idx, elm) {
$("#"+elm.id).slider({
min: min_score,
max: max_score,
value: 0,
step: 1,
slide: function(event, ui) {
$('#'+elm.id).mouseout( function() { oTable.fnDraw(); } );
....
[/code]
i hope somebody can help me.
I create two tables and for each table one input field with filtering range and jquerui slider.
If i move the slider for the first table than it redraw the first table.
If i move the slider for the second table than he want to redraw the first table but not the second.
But if i click in the second table on table head, than he redraw the second table.
Tables
[code]
....
...
[/code]
Script datatable
[code]
var oTable;
$(document).ready(function() {
oTable = $('.dataTable').dataTable({
....
....
[/code]
script to filter
(in aData[0] is the id of range input field)
[code]
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
var temp="x"+aData[0];
var element=document.getElementById(temp);
var iMin = element.value * 1;
....
....
[/code]
and here i call the function to redraw datatable
[code]
$(function() {
$('.slidertf').each(function(idx, elm) {
$("#"+elm.id).slider({
min: min_score,
max: max_score,
value: 0,
step: 1,
slide: function(event, ui) {
$('#'+elm.id).mouseout( function() { oTable.fnDraw(); } );
....
[/code]
This discussion has been closed.
Replies
For each table i create object
[code]
oTable0 = $('#table0').dataTable();
oTable1 = $('#table1').dataTable();
[/code]
and redraw function
[code]
$('#'+elm.id).mouseout( function() { oTable0.fnDraw(); } );
$('#'+elm.id).mouseout( function() { oTable1.fnDraw(); } );
[/code]