搜索中的 jQuery 日期字段

Question

下午，

我刚刚开始使用一些 jQuery 代码和 html 表格（html 表格是从 PHP 生成的），所以如果这是基本的东西，请原谅，因为大部分代码都是复制和粘贴的！

jQuery 脚本是

<script src="../plugins/DataTables/DataTables-1.10.12/js/jquery-1.12.3.js"></script>
<script src="../plugins/DataTables/DataTables-1.10.12/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="../plugins/DataTables/DataTables-1.10.12/css/jquery.dataTables.min.css"/>

而 JavaScript 是

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

    // DataTable
    var table = $('#template').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 width="100%" class="display" id="template" cellspacing="0">
    <thead>
        <tr>
            <th>W/h</th>
            <th>Product</th>
            <th>Description</th>
            <th>Negative Free Stock</th>
            <th>On Order Qty</th>
            <th>Make or Buy</th>
            <th>Last Transaction Date</th>
            <th>Last Transaction Type</th>
            <th>Analysis B</th>
            <th>Next Order No</th>
            <th>Next On Order Qty</th>
            <th>Next Date required</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>W/h</th>
            <th>Product</th>
            <th>Description</th>
            <th>Negative Free Stock</th>
            <th>On Order Qty</th>
            <th>Make or Buy</th>
            <th>Last Transaction Date</th>
            <th>Last Transaction Type</th>
            <th>Analysis B</th>
            <th>Next Order No</th>
            <th>Next On Order Qty</th>
            <th>Next Date required</th>
        </tr>
    </tfoot>
    <tbody>

<?php
//BUILD SQL QUERY
$sql = "
SELECT [warehouse]
      ,[product]
      ,[analysis_b]
      ,[description]
      ,[negative_free_stock]
      ,[on_order_qty]
      ,[make_or_buy]
      ,[last_transaction_date]
      ,[last_transaction_type]
      ,[next_order_no]
      ,[next_on_order_qty]
      ,[next_date_required]
  FROM [dbo].[negative_stock]
  ";
$stmt = sqlsrv_query( $conn, $sql );
if( $stmt === false) {
    die( print_r( sqlsrv_errors(), true) );
}

// START LOOP
while( $row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_ASSOC) ) {

// POPULATE TABLE DATA
        echo'
        <tr>
            <td>'.$row['warehouse'].'</td>
            <td>'.$row['product'].'</td>
            <td>'.$row['description'].'</td>
            <td>'.$row['negative_free_stock'].'</td>
            <td>'.$row['on_order_qty'].'</td>
            <td>'.$row['make_or_buy'].'</td>
            <td>'.'</td>
            <td>'.$row['last_transaction_type'].'</td>
            <td>'.$row['analysis_b'].'</td>
            <td>'.$row['next_order_no'].'</td>
            <td>'.$row['next_on_order_qty'].'</td>
            <td>'.'</td>
        </tr>';
}
?>

以上所有代码均来自：https://www.datatables.net/examples/api/multi_filter.html

现在上面所有的代码都可以正常工作了。

但请注意，我已将 2 个 x 标签留空，这些标签用于 2 个日期字段，例如[last_transaction_date] 和 [next_date_required]

当我将日期字段添加到两个空的 TD 行中时，它会在某处破坏代码，页面上显示的所有即时消息都是连续两次的标题，它不会写出任何表格或 CSS

数据来自 Microsoft SQL 服务器，其中一个日期字段是“日期”格式，一个是“日期时间”格式。

如果我回显它出现的日期字段：2016-08-30 如果我回显它出现的 DateTime 字段：2016-08-30 00:00:00.000

如果我一次尝试一个，我会得到相同的结果。

我相信这可能与JS生成的搜索栏有关？例如

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

任何帮助将不胜感激！

Answer 1

任何阅读此内容的人的答案是首先使用正确的数据类型，例如

$sql = "
SELECT [warehouse]
      ,[product]
      ,[analysis_b]
      ,[description]
      ,[negative_free_stock]
      ,[on_order_qty]
      ,[make_or_buy]
      ,CONVERT(VARCHAR(10), [last_transaction_date], 103) as [last_transaction_date]
      ,[last_transaction_type]
      ,[next_order_no]
      ,[next_on_order_qty]
      ,CONVERT(VARCHAR(10), [next_date_required], 103) as [next_date_required]
FROM [dbo].[negative_stock]
  ";