This topic contains 1 reply, has 2 voices, and was last updated by Sean Sean 2 years, 5 months ago.

Ajax Data Table – Server Side – Custom form Search – Sorting


  • michael
    Participant

    Posts: 4
    Member Reply #2731

    Hello,
    I bought this beautiful your template, but to date have failed to fully utilize its functions in particular I am referring to Ajax Datatable,
    Place my code below
    It does not work in the form of research, and column sorting can help me (I think this is true for help many others who have bought this beautiful template?)
    Thank you!!
    P.S. I tried to reconstruct this code from the comments published in ThemeForest

    page datatable.html

    <div class="row">
    				<div class="col-md-12">
    					<div class="note note-danger">
    						<p>
    							 NOTE: The below datatable is not connected to a real database so the filter and sorting is just simulated for demo purposes only.
    						</p>
    					</div>
    					<!-- Begin: life time stats -->
    					<div class="portlet">
    						<div class="portlet-title">
    							<div class="caption">
    								<i class="fa fa-shopping-cart"></i>Order Listing
    							</div>
    							<div class="actions">
    								
    								<i class="fa fa-plus"></i>
    								<span class="hidden-480">
    								New Order </span>
    								
    								<div class="btn-group">
    									
    									<i class="fa fa-share"></i>
    									<span class="hidden-480">
    									Tools </span>
    									<i class="fa fa-angle-down"></i>
    									
    									<ul class="dropdown-menu pull-right">
    										
  • Export to Excel
  • Export to CSV
  • Export to XML
  • <li class="divider">
  • Print Invoices
  • </div> </div> </div> <div class="portlet-body"> <div class="table-container"> <div class="table-actions-wrapper"> <span> </span> <select class="table-group-action-input form-control input-inline input-small input-sm"> <option value="">Select...</option> <option value="Cancel">Cancel</option> <option value="Cancel">Hold</option> <option value="Cancel">On Hold</option> <option value="Close">Close</option> </select> <button class="btn btn-sm yellow table-group-action-submit"><i class="fa fa-check"></i> Submit</button> </div> <table class="table table-striped table-bordered table-hover" id="datatable_ajax"> <thead> <tr role="row" class="heading"> <th width="2%"> title a </th> <th width="5%"> Record # A </th> <th width="15%"> Date </th> <th width="15%"> Customer </th> <th width="10%"> Ship To </th> <th width="10%"> Price </th> <th width="10%"> Amount </th> <th width="10%"> Status </th> <th width="10%"> Actions </th> </tr> <tr role="row" class="filter"> <td><input type="text" class="form-control form-filter input-sm" name="filter_input_1" id="filter_input_1"> </td> <td> <input type="text" class="form-control form-filter input-sm" name="filter_input_2" id="filter_input_2"> </td> <td> <input type="text" class="form-control form-filter input-sm" name="param1"> </td> <td> <input type="text" class="form-control form-filter input-sm" name="order_customer_name"> </td> <td> <input type="text" class="form-control form-filter input-sm" name="order_ship_to"> </td> <td> <div class="margin-bottom-5"> <input type="text" class="form-control form-filter input-sm" name="order_price_from" placeholder="From"/> </div> <input type="text" class="form-control form-filter input-sm" name="order_price_to" placeholder="To"/> </td> <td> <div class="margin-bottom-5"> <input type="text" class="form-control form-filter input-sm margin-bottom-5 clearfix" name="order_quantity_from" placeholder="From"/> </div> <input type="text" class="form-control form-filter input-sm" name="order_quantity_to" placeholder="To"/> </td> <td> <select name="order_status" class="form-control form-filter input-sm"> <option value="">Select...</option> <option value="pending">Pending</option> <option value="closed">Closed</option> <option value="hold">On Hold</option> <option value="fraud">Fraud</option> </select> </td> <td> <div class="margin-bottom-5"> <button class="btn btn-sm yellow filter-submit margin-bottom" id="filter_submit_btn" name="filter_submit_btn"><i class="fa fa-search"></i> Search</button> </div> <button class="btn btn-sm red filter-cancel"><i class="fa fa-times"></i> Reset</button> </td> </tr> </thead> <tbody> </tbody> </table> </div> </div> </div> <!-- End: life time stats --> </div> </div>

    page script.js

    var TableAjax = function () {
    
        var initPickers = function () {
            //init date pickers
            $('.date-picker').datepicker({
                rtl: Metronic.isRTL(),
                autoclose: true
            });
        }
    
        var handleRecords = function () {
    
            var grid = new Datatable();
    
           // var grid = new Datatable();
    
    grid.init({
        src: $("#datatable_ajax"),
        onSuccess: function (grid) {
            // execute some code after table records loaded
        },
        onError: function (grid) {
            // execute some code on network or other general error  
        },
        dataTable: { // here you can define a typical datatable settings from http://datatables.net/usage/options 
            "lengthMenu": [
                [10, 20, 50, 100, 150, -1],
                [10, 20, 50, 100, 150, "All"] // change per page values here
            ],
            "pageLength": 20, // default record count per page
            "ajax": {
                "url": "demo/ajax_dt.php", // ajax source
            },
            "order": [
                    [1, "asc"]
                ] // set first column as a default sort by asc
        }
    });
    
    $('#filter_submit_btn').click(function(){
      grid.addAjaxParam("param1",  $('#filter_input_1').val());
      grid.addAjaxParam("param2",  $('#filter_input_2').val());
    
      grid.setAjaxParam("param3",  $('#filter_input_3').val());
      grid.setAjaxParam("param3",  $('#filter_input_4').val()); // resets a new value
      grid.getDataTable().fnDraw(); //reload the datatable;
    });
    
    
    
           
        }
    
        return {
    
            //main function to initiate the module
            init: function () {
    
                initPickers();
                handleRecords();
            }
    
        };
    
    }();
    

    page script php datatable server side

    <?php
      /* 
       * Paging
       */
    
      $iTotalRecords = 178;
      $iDisplayLength = intval($_REQUEST['length']);
      $iDisplayLength = $iDisplayLength < 0 ? $iTotalRecords : $iDisplayLength; 
      $iDisplayStart = intval($_REQUEST['start']);
      $sEcho = intval($_REQUEST['draw']);
      
      $records = array();
      $records["data"] = array(); 
    
      $end = $iDisplayStart + $iDisplayLength;
      $end = $end > $iTotalRecords ? $iTotalRecords : $end;
    
      $status_list = array(
        array("success" => "Pending"),
        array("info" => "Closed"),
        array("danger" => "On Hold"),
        array("warning" => "Fraud")
      );
    
      for($i = $iDisplayStart; $i < $end; $i++) {
        $status = $status_list[rand(0, 2)];
        $id = ($i + 1);
        $records["data"][] = array(
          $id+7,
          $id,
          '12/09/2013',
          'Jhon Doe',
          'Jhon Doe',
          '450.60$',
          rand(1, 10),
          '<span class="label label-sm label-'.(key($status)).'">'.(current($status)).'</span>',
          '<i class="fa fa-search"></i> View',
       );
      }
    
      if (isset($_REQUEST["customActionType"]) && $_REQUEST["customActionType"] == "group_action") {
        $records["customActionStatus"] = "OK"; // pass custom message(useful for getting status of group actions)
        $records["customActionMessage"] = "Group action successfully has been completed. Well done!"; // pass custom message(useful for getting status of group actions)
      }
    
      $records["draw"] = $sEcho;
      $records["recordsTotal"] = $iTotalRecords;
      $records["recordsFiltered"] = $iTotalRecords;
      
      echo json_encode($records);
    ?>
    
    • This topic was modified 2 years, 5 months ago by  michael.
    • This topic was modified 2 years, 5 months ago by  michael.
    Sean
    Sean
    Keymaster

    Posts: 4226
    Support Staff Reply #2734

    Hi :),

    Thanks for contacting our support.

    Please note in the demo we used a dummy data to demonstrate how the actual datatable works with server side data. When you sort or search it just sends the parameters to the server side demo script and gets the same data. For actual product you will need to change the server side script according to your project requirements.

    Thanks.

You must be logged in to reply to this topic.