Question

下午全部，

我刚刚开始使用一些结合html表的jQuery代码（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 < / p>

数据来自Microsoft SQL服务器，其中一个日期字段为“Date”格式，一个为“DateTime”格式。

如果我回显日期字段，则显示：2016-08-30 如果我回显DateTime字段，则显示：2016-08-30 00：00：00.000

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

我相信它可能与JS生成的搜索栏有关??? e.g。

$(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]
  ";

搜索中的jQuery日期字段

1 个答案: