2017-02-24 7 views
0

mysqlデータベースから作成されたテーブルに複数の検索ボックスを作成しようとしています。これは良い例です:(https://datatables.net/examples/api/multi_filter.html)、テーブルはhtmlで生成されます。mysqlデータベースに複数の検索オプションが設定されています

また、ajaxを実装し、タイムアウトを1000sに設定したいとします。 この時点で私はテーブルの細かいと1つの検索オプションが動作することがわかりますが、どのように追加するには?ここで

は私がこれまで持っているものです。

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.css"> 
<script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script> 
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 

<script> 

$(document).ready(function() { 
// Setup - add a text input to each footer cell 
$('#mainResults tfoot th').each(function() { 
    var title = $(this).text(); 
    $(this).html('<input type="text" placeholder="Search '+denominacija+'" />, <input type="text" placeholder="Search '+stava+'" />'); 
}); 

// DataTable 
    setTimeout(function() { 
     $('#mainResults').load('branje_stevcev2.php'); 
     setTimeout(function(){ 
     var table = $('#mainResults').DataTable(); 

     },1000); 
    }, 1000); 

// Apply the search 
table.columns().every(function() { 
    var that = this; 

    $('input', this.footer()).on('keyup change', function() { 
     if (that.search() !== this.value) { 
      that 
       .search(this.value) 
       .draw(); 
     } 
    }); 
    }); 
}); 

</script> 

<table border='1' id="mainResults"> 
<td> 
Nalagam ...</td> 
</table> 

答えて

0

ので、私はちょっとそれが仕事を得るために管理し、しかしまだ誰かが助けることができればそれはずっとappritiatedことになるので、ここでのAjaxを実装する方法がわかりません私。

<html> 
<style> 
tfoot input { 
     width: 100%; 
     padding: 3px; 
     box-sizing: border-box; 
    } 
</style> 
<script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script> 
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 
<script> 
$(document).ready(function() { 
    // Setup - add a text input to each footer cell 
    $('#example tfoot th').each(function() { 
     var title = $(this).text(); 
     $(this).html('<input type="text" placeholder="Search '+title+'" />'); 
    }); 

    // DataTable 
    var table = $('#example').DataTable(); 

    // Apply the search 
    table.columns().every(function() { 
     var that = this; 

     $('input', this.footer()).on('keyup change', function() { 
      if (that.search() !== this.value) { 
       that 
        .search(this.value) 
        .draw(); 
      } 
     }); 
    }); 
}); 
</script> 
<table id="example" class="display" cellspacing="0" width="100%"> 

     <?php 

$servername = "localhost"; 
$username = "root"; 
$password = ""; 
$dbname = "advansys"; 

$conn = new mysqli($servername, $username, $password, $dbname); 
if ($conn->connect_error) { 
    die("Connection failed: " . $conn->connect_error); 
} 

$result = mysqli_query($conn, "SELECT denominacija, stava, dobitek, vrsta_stave, total_in, date_time FROM stevci"); 


echo "<thead> 
      <tr> 
<th>Denominacija</th> 
<th>Stava</th> 
<th>Dobitek</th> 
<th>vrsta_stave</th> 
<th>total_in</th> 
<th>Datum in ura</th> 


</tr> 
</thead> 
<tfoot> 
      <tr> 
       <th>Name</th> 
       <th>Position</th> 
       <th>Office</th> 
       <th>Age</th> 
       <th>Start date</th> 
       <th>Salary</th> 
      </tr> 
     </tfoot> 
<tbody> 
"; 
while ($db_v = mysqli_fetch_assoc($result)) { 

echo "<tr>"; 
echo "<td>" . $db_v['denominacija'] ."</td>"; 
echo "<td>" . $db_v['stava'] ."</td>"; 
echo "<td>" . $db_v['dobitek'] ."</td>"; 
echo "<td>" . $db_v['vrsta_stave'] ."</td>"; 
echo "<td>" . $db_v['total_in'] ."</td>"; 
echo "<td>" . $db_v['date_time'] ."</td>"; 


echo"</tr>"; 
} 
echo "</tbody>"; 

mysqli_close($conn); 

if (isset ($_GET['update'])) 
{ 
    echo $tbl; 
    die(); 
} 
?> 
    </table> 
    </html> 
関連する問題