如何使用带有tabletools的数据表获取可扩展的详细信息？

时间：2017-07-14 08:05:28

标签： php jquery ajax datatables tabletools

如何获得有关点击的可扩展详细信息，我希望我的表格详细信息如下：

enter image description here

在上图中，当我点击（+）符号时，它会给我更多的表格字段，我想在我的数据表中使用这种类型的功能。

这是我的HTML代码： 

   <div class="row">
       <div class="col-md-12">
    <!-- BEGIN EXAMPLE TABLE PORTLET-->
    <div class="portlet box blue-hoki">
        <div class="portlet-title">
            <div class="caption">
                <i class="fa fa-globe"></i>Prestart Hand Tools/Electric Power Tool Safety Checks
            </div>
            <div class="tools">
            </div>
        </div>
        <div class="portlet-body">
            <table class="table table-striped table-bordered table-hover" id="tblListing">
                <thead>
                    <tr>
                        <th>Sr. No.</th>
                        <th>User</th>
                        <th>Model</th>
                        <th>Safety Inspection Due</th>
                        <th>MachineOwner</th>
                        <th>MachineType</th>
                        <th>FleetLicNum</th>
                        <th>YearOfMan</th>
                        <th>Manufactur</th>
                        <th>Image</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>


<script type="text/javascript">
   $(document).ready(function () {
    var cOptions = [];
    cOptions.columnDefs = [{
            data: "srNo",
            targets: 0,
            orderable: false,
            width: 50
        }, {
            data: "user_id",
            targets: 1,
            width: 150
        }, {
            data: "Model",
            targets: 2,
            width: 200
        }, {
            data: "SafetyInspectionDue",
            targets: 3,
            width: 150
        }, {
            data: "MachineOwner",
            targets: 4,
            width: 50
        }, {
            data: "MachineType",
            targets: 5,
            width: 50
        }, {
            data: "FleetLicNum",
            targets: 6,
            width: 50
        }, {
            data: "YearOfMan",
            targets: 7,
            width: 50
        }, {
            data: "Manufactur",
            targets: 8,
            width: 50
        }, {
            data: "ToolImage",
            targets: 9,
            orderable: false,
            className: "dt-center",
            width: 50
        }, {
            data: "action",
            targets: 10,
            orderable: false,
            className: "dt-center",
            width: 150
        }];
    cOptions.order = [
        [1, 'asc']
    ];
    cOptions.mColumns = [1, 2, 3, 4, 5, 6, 7, 8];
    cOptions.url = 'ajax/mytoolbox.php';
    Custom.initListingTable(cOptions);
  </script>

我的ajax / mytoolbox.php文件： 

  <?php

   include '../application/application_top.php';
   include ROOT . '/application/function.php';
   include_once '../../classes/mytoolbox.class.php';

   $response['status'] = '';
   $response['errorMsg'] = '';
   $action = get_data('action', '');

  if ($action == 'getList') {

$request = $_REQUEST;
$start = $request["start"];
$length = $request["length"];
$order = $request["order"];
$orderby = "Model DESC";
$search = $request["search"]["value"];

if ($order[0]['column'] == 1) {
    $orderby = "reg.reg_fname " . strtoupper($order[0]['dir']);
} elseif ($order[0]['column'] == 2) {
    $orderby = "Model " . strtoupper($order[0]['dir']);
} elseif ($order[0]['column'] == 3) {
    $orderby = "SafetyInspectionDue " . strtoupper($order[0]['dir']);
} elseif ($order[0]['column'] == 4) {
    $orderby = "MachineOwner " . strtoupper($order[0]['dir']);
} elseif ($order[0]['column'] == 5) {
    $orderby = "MachineType " . strtoupper($order[0]['dir']);
} elseif ($order[0]['column'] == 6) {
    $orderby = "FleetLicNum " . strtoupper($order[0]['dir']);
} elseif ($order[0]['column'] == 7) {
    $orderby = "YearOfMan " . strtoupper($order[0]['dir']);
} elseif ($order[0]['column'] == 8) {
    $orderby = "Manufactur " . strtoupper($order[0]['dir']);
}

$tableData = array();
$mytoolbox = new Mytoolbox();
$mytoolbox->cquery = "SELECT SQL_CALC_FOUND_ROWS mytoolbox.*,CONCAT(reg.reg_fname,' ',reg.reg_lname) as name from safe_my_tool_box as mytoolbox LEFT JOIN safe_register as reg on mytoolbox.user_id = reg.reg_id WHERE mytoolbox.is_delete='0'";
if ($search != "") {
    $mytoolbox->cquery .= " AND (CONCAT(reg.reg_fname,' ',reg.reg_lname) LIKE '%" . $search . "%' OR Model LIKE '%" . $search . "%' OR YearOfMan LIKE '%" . $search . "%' )";
}
$mytoolbox->cquery .= " ORDER BY " . $orderby;
if ($length != -1)
    $mytoolbox->cquery .= " LIMIT " . $start . "," . $length;
$mytoolbox->action = "get";
$mytoolbox_res = $mytoolbox->process();
foreach ($mytoolbox_res['res'] as $mytoolbox_row_key => $mytoolbox_row) {
    $tableData[$mytoolbox_row_key]['srNo'] = '';
    $tableData[$mytoolbox_row_key]['user_id'] = $mytoolbox_row['name'];
    $tableData[$mytoolbox_row_key]['Model'] = $mytoolbox_row['Model'];
    $tableData[$mytoolbox_row_key]['SafetyInspectionDue'] = $mytoolbox_row['SafetyInspectionDue'];
    $tableData[$mytoolbox_row_key]['MachineOwner'] = $mytoolbox_row['MachineOwner'];
    $tableData[$mytoolbox_row_key]['MachineType'] = $mytoolbox_row['MachineType'];
    $tableData[$mytoolbox_row_key]['FleetLicNum'] = $mytoolbox_row['FleetLicNum'];
    $tableData[$mytoolbox_row_key]['YearOfMan'] = $mytoolbox_row['YearOfMan'];
    $tableData[$mytoolbox_row_key]['Manufactur'] = $mytoolbox_row['Manufactur'];
    $tableData[$mytoolbox_row_key]['ToolImage'] = "<a href='#ImageModal' data-id='" . $mytoolbox_row['safe_my_tool_id'] . "' data-toggle='modal' alt='view'>Image</a>";
    $tableData[$mytoolbox_row_key]['action'] = "<a href='#displayModal' data-id='" . $mytoolbox_row['safe_my_tool_id'] . "' data-toggle='modal' alt='view'>Question</a>"
            . " | <a href='#confirmModal' data-id='" . $mytoolbox_row['safe_my_tool_id'] . "' data-toggle='modal' alt='Remove'>Delete</a>";
}
$data['data'] = $tableData;

$mytoolbox2 = new Mytoolbox();
$mytoolbox2->cquery = "SELECT FOUND_ROWS() as total_filter";
$mytoolbox2->action = "get";
$mytoolbox2_res = $mytoolbox2->process();

$mytoolbox1 = new Mytoolbox();
$mytoolbox1->cquery = "SELECT COUNT(*) AS total_tool_box FROM safe_my_tool_box WHERE is_delete='0'";
$mytoolbox1->action = "get";
$mytoolbox1_res = $mytoolbox1->process();
$data['recordsTotal'] = $mytoolbox1_res['res'][0]['total_tool_box'];
$data['recordsFiltered'] = $mytoolbox2_res['res'][0]['total_filter'];
echo json_encode($data);
exit(0);
  }
 ?>

我的custom.js文件是： 

    var Custom = function () {

// private functions & variables

var myFunc = function(text) {
    alert(text);
};
var initListingTable = function (cOptions) {
    var table = $('#tblListing');

    /* Table tools samples: https://www.datatables.net/release-datatables/extras/TableTools/ */

    /* Set tabletools buttons and button container */

    $.extend(true, $.fn.DataTable.TableTools.classes, {
        container : "btn-group tabletools-dropdown-on-portlet",
        buttons   : {
            normal    : "btn btn-sm default",
            disabled  : "btn btn-sm default disabled"
        },
        collection: {
            container : "DTTT_dropdown dropdown-menu tabletools-dropdown-menu"
        }
    });

    var oTable = table.dataTable({
        serverSide  : true,
        processing  : true,
        // Internationalisation. For more info refer to http://datatables.net/manual/i18n
        language  : {
            aria  : {
                sortAscending : ": activate to sort column ascending",
                sortDescending: ": activate to sort column descending"
            },
            emptyTable    : "No data available",
            info          : "Showing _START_ to _END_ of _TOTAL_ entries",
            infoEmpty     : "No entries found",
            infoFiltered  : "(filtered from _MAX_ total entries)",
            lengthMenu    : "Show _MENU_ entries",
            search        : "Search:",
            zeroRecords   : "No matching records found"
        },

        // Or you can use remote translation file
        //language: {
        //   url: '//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Portuguese.json'
        //},
        searching   : true,
        order       : cOptions.order,
        lengthMenu  : [
            [25, 50, 100, -1],
            [25, 50, 100, "All"] // change per page values here
        ],
        // set the initial value
        pageLength  : 25,
        dom         : "<'row' <'col-md-12'T>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // horizobtal scrollable datatable
        fnRowCallback: function(nRow, aData, iDisplayIndex){
            var oSettings = oTable.fnSettings();
            var index = oSettings._iDisplayStart + iDisplayIndex + 1;
            $('td:eq(0)',nRow).html(index);
            return nRow;
        },
        ajax      : {
            type  : "POST",
            url   : cOptions.url,
            data: ({
                action  : "getList"
            }),
            dataSrc: function ( json ) {
                return json.data;
            }
        },
        responsive: {
        details: {
            type: 'column'
        }
    },
        columnDefs: cOptions.columnDefs,
        // Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
        // setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js). 
        // So when dropdowns used the scrollable div should be removed. 
        //dom: "<'row' <'col-md-12'T>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",

        tableTools: {
            sSwfPath  : Metronic.getAssetsPath()+"global/plugins/datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf",
            aButtons  : [{
                sExtends      : "pdf",
                sButtonText   : "PDF",
                mColumns      : cOptions.mColumns
            }, {
                sExtends      : "csv",
                sButtonText   : "CSV",
                mColumns      : cOptions.mColumns
            }, {
                sExtends      : "xls",
                sButtonText   : "Excel",
                mColumns      : cOptions.mColumns
            }, {
                sExtends      : "print",
                sButtonText   : "Print",
                sInfo         : 'Please press "CTR+P" to print or "ESC" to quit',
                sMessage      : "Generated by DataTables",
                mColumns      : cOptions.mColumns
            }]
        }
    });

    var tableWrapper = $('#tblListing_wrapper'); // datatable creates the table wrapper by adding with id {your_table_jd}_wrapper

    tableWrapper.find('.dataTables_length select').select2({minimumResultsForSearch: Infinity}); // initialize select2 dropdown
};

var handleDatePickers = function () {
    if ($().datepicker) {
        $('.date-picker').datepicker({
            rtl: Metronic.isRTL(),
            autoclose: true
        });
        //$('body').removeClass("modal-open"); // fix bug when inline picker is used in modal
    }

    /* Workaround to restrict daterange past date select: http://stackoverflow.com/questions/11933173/how-to-restrict-the-selectable-date-ranges-in-bootstrap-datepicker */
};

var handleTimePickers = function () {
    if (jQuery().timepicker) {
        $('.timepicker-default').timepicker({
            autoclose: true,
            showSeconds: true,
            minuteStep: 1
        });

        $('.timepicker-no-seconds').timepicker({
            autoclose: true,
            minuteStep: 5
        });

        $('.timepicker-24').timepicker({
            autoclose: true,
            minuteStep: 5,
            showSeconds: false,
            showMeridian: false
        });

        // handle input group button click
        $('.timepicker').parent('.input-group').on('click', '.input-group-btn', function(e){
            e.preventDefault();
            $(this).parent('.input-group').find('.timepicker').timepicker('showWidget');
        });
    }
};

// public functions
return {

    //main function
    init: function () {
        //initialize here something.
        handleDatePickers();
        handleTimePickers();
    },

    //some helper function
    doSomeStuff: function () {
        myFunc();
    },
    initListingTable: function(cOptions) {
        initListingTable(cOptions);
    },
    handleDatePickers: function() {
        handleDatePickers();
    },
    handleTimePickers: function() {
        handleTimePickers();
    }

};

}();

数据表列表视图：

enter image description here

我想在可扩展的详细信息中使用Safety Inspection Due，MachineOwner和MachineType字段。

0 个答案:

没有答案
相关问题
最新问题