使用存储过程在 Datatable 中显示数据时出现问题答案

【问题标题】：Problem displaying data in Datatable using a Stored Procedure使用存储过程在 Datatable 中显示数据时出现问题
【发布时间】：2021-07-04 19:57:27
【问题描述】：

当我想使用 SQLServer 中制作的 Store Procedure 可视化著名 Datatable 库中的数据时，我遇到以下问题，我使用 Store Procedure 在表中显示我的信息，问题是我的数据没有被反映在表中，所以我使用 PHP 和 AJAX。

为了查看我的数据表中的信息，我使用它的 API 来附加更广为人知的第二行，即 Child Rows，以下是我用来构建表及其参数的 AJAX 代码：

/* Formatting function for row details - modify as you need */
function format ( d ) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Currency</td>'+
            '<td>'+d.Currency+'</td>'+
        '</tr>'+
        
    '</table>';
}
 
$(document).ready(function() {
    var table = $('#example').DataTable( {
       // "processing": true,
        "serverSide": true,
        "ajax": {
            url :"../utileria.php",
            type: "POST",
            data: {
                param: 1,               
            },
        },
        columns: [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data" : "Order_Buy" },        
            { "data" : "Currency" },           
           
        ],
        "order": [[1, 'asc']]
    } );

    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
 
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );
} );

请务必注意，我的父行将包含 Order_Buy 字段，而我的子行将包含 Currency 字段

以下是我调用存储过程和类conectar.php的PHP代码

utileria.php

<?php
    header('Content-Type: text/html; charset=utf-8');   
    $param = $_POST['param'];   
    switch($param) {
        case '1':               
                $query = array();
                include 'conectar.php';
                $sql = "{call SPTest(?)}";          
                $stmt = sqlsrv_query($conn, $sql);
                if ( $stmt === false) {
                    die( print_r( sqlsrv_errors(), true) );
                }   
                while( $row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC) ) {
                    $record = array(
                        "F.ORDER"       => utf8_encode ($row['Order_Buy']), //Orden de compra
                        "F.CURRENCY"          => utf8_encode ($row['Currency']), //Moneda
                       
                    );
                    array_push($query, $record);
                }
                echo json_encode($query);
                sqlsrv_free_stmt( $stmt);       
                sqlsrv_close($conn);

            break;
    
    }
    
?>

我不知道为什么我的表格没有显示数据，可能是我的代码有问题。

如果有助于更清楚地说明问题，我会附上生成数据表的 HTML 代码。

!doctype html>
<html lang="es">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="libraries/css/bootstrap.min.css" crossorigin="anonymous">
    <link rel="stylesheet" href="libraries/css/estilos.css" type="text/css">
    <script src="libraries/js/jquery-1.12.3.min.js"></script>
    <script src="javascript/Example.js"></script>
    <link href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" rel="stylesheet"/>    
    <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
    
    <link rel="icon" type="image/png" href="libraries/img/icon.png" />
</head>

<body>
    <div class="cuerpo">
        <div class="dividir menu">
            <div class="centrar-vertical">
                <img src="libraries/img/logo.jpg" width="200" height="40" alt="Test" class="img-responsive">
            </div>
            <div class="alinear-derecha centrar-vertical">              
                <button id="logout-btn" class="btn btn-default">Cerrar Sesión</button>
            </div>
        </div>
        <div id="tablaDatatable">  
        <table id="example" class="display" width="100%">
            <thead>
                <tr>
                    <th></th>
                    <th>Order_Buy</th>                  
                    <th>Currency</th>                                                
                </tr>              
            </thead>
        </table>        
        </div>
    </div>
    
</body>
</html>

<script type="text/javascript">
    $(document).ready(function() {
        $('#example').DataTable();
    } );
</script>

【问题讨论】：

你的原始 JSON 的结构是什么，来自utileria.php？使用serverSide: true 时请查看expected JSON structure。请参阅“返回的数据”和“示例数据”部分。
你为什么用utf8_encode？
@Dharman 我用它把我们在 ISO-8859-1 中的字符串编码成另一个 UTF-8 编码的字符串。
嗯，这实际上是正确的用法，但接下来的问题是：为什么你甚至在 Latin1 字符集中有字符串？
@andrewjames 我不使用任何 JSON 结构，在我的文件中 utileria.php 是我在问题中附加的代码

标签： php ajax stored-procedures datatables

【解决方案1】：

我已经写了一个 js 数据网格，因为我对任何可用的资源都不满意，如果你想要一个数据表就试试吧希望它对你有用。

JS Datargid on github

干杯

【讨论】：