使用PHP的数据表行扩展/详细信息

时间:2018-11-06 16:45:20

标签: javascript php jquery datatables

我正在使用数据表来显示查询的输出,而我没有使用Ajax。我正在尝试使用数据表的行详细信息功能,例如以下示例:https://datatables.net/examples/api/row_details.html

我从查询中获得的结果将其分配给数组并显示如下:

HTML

<div class="container" >  

                <div class="table-responsive" >  
                     <table id="myTable" class="table table-striped table-bordered table-hover">  
                          <thead style="background-color: #8BA8CA;"> 

                <tr>

                    <th class="text-align-center">Job Number</th>
                    <th class="text-align-center">SC</th>
                    <th class="text-align-center">Circuit</th>
                    <th class="text-align-center">Job Type</th>
                    <th class="text-align-center">Duration(mins)</th>

                </tr> </thead>
<tbody>
                  <?php for($i = 0; $i < count($NUM_1); $i++)
                { 
                ?>

                <tr>

                <td align="center">
                        <label class="text-align-center">                           
                            <?php echo $NUM_1[$i]; ?>
                        </label></a>

                    </td>
                <td align="center">
                        <label class="text-align-center">
                            <?php echo $SC[$i]; ?>
                        </label>

                    </td> 
                    <td align="center">
                        <label class="text-align-center">
                            <?php echo $CIRCUIT[$i]; ?>
                        </label>

                    </td> 
                <td align="center">
                        <label class="text-align-center">
                            <?php echo $JOB_TYPE[$i]; ?>
                        </label>

                    </td>
                <td align="center">
                        <label class="text-align-center">
                            <?php echo $DURATION_MINUTES[$i]; ?>
                        </label>

                    </td> <?}?>

JavaScript

<script>
       var dataTables = $('#myTable').DataTable({
          fixedHeader: true,
        select: {
                style: 'multi'
            },
        order: [[ 1, "asc" ]],
        aLengthMenu: [[100, 200, 500, -1], [100, 200, 500, "All"]],
        pageLength: 200,rowGroup: {
                dataSrc: 1
            },


        dom: "<'row'<'col-sm-1'l><'col-sm-6 text-center'B><'col-sm-5'f>>" +
          "<'row'<'col-sm-12'tr>>" +
          "<'row'<'col-sm-5'i><'col-sm-7'p>>",

    buttons: [
      {extend: 'excel',
                text: 'Export to Excel'},

                'print'
    ]

    });
</script>

<!--This script applies the column filtering-->
<script> 

$(document).ready(function() {


    // Setup - add a text input to each footer cell
    $('#myTable tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="'+title+' " style="font-size:11px;"/>' );
    } );

    // DataTable
    var table = $('#myTable').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>

链接(https://datatables.net/examples/api/row_details.html)中显示的示例使用带有Javascript的Ajax数据,但是我的数据和变量在PHP中。 我如何在PHP中使用它并使其与Javascript数据表一起使用

0 个答案:

没有答案
相关问题