jQuery Datatable with the ajax Json String



You  can integrate  jQuery Datatable with the ajax source in following way.

Download Realse Packages 

https://datatables.net/download/

Import JS and CSS

<script src="public/js/jquery.dataTables.min.js" type="text/javascript"></script>
 <link href="public/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css"/>

HTML 

  <div class="col-md-12 table-responsive">
                       <!-- <table id="table" class="table  table-bordered table-striped ">-->
   <table id="table" class="table table-striped table-hover dt-responsive display nowrap" width="100%" cellspacing="0" >

                            <thead>
                                <tr>
                                                  <th> Id</th>
                                            <th>Name</th>
               
                                </tr>
                            </thead>
                            <tfoot>
<tr>
<th>Id</th>
                                                         <th> Name</th>

</tr>
</tfoot>
                        </table>


                    </div>

js


   $(document).ready(function () {
//$('#table').DataTable();

//$('#table').DataTable(
// {
// "pageLength": 100,
// "ajax": "./index.php?controller=LIST&action=getAc",
// "columns": [
// { "data": "ID" },
// { "data": "NAME" },

// ]
// }
//);

   });

controller 

function getName() {
        try {
ini_set('memory_limit', '-1');
            $this->LoadModel('name');
                $res = $this->model->getNames();
// $res ='"data":'.$res;
//$d = array();
//$d[] = array('data' => $res);
//$json = json_encode($d);
                if (count($res) > 0) {
                    echo '{"data":'.json_encode($res).'}';
                }else {
echo '{"data":""}';  //Append data at the beginning of code
}

        } catch (Exception $ex) {
            echo json_encode(array("ERROR" => " <br>Error(" . $ex->getMessage() .      ")"));
        }
    }

Sample  Json

{
  "data": [
    {
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "$320,800",
      "start_date": "2011/04/25",
      "office": "Edinburgh",
      "extn": "5421"
    }
]
}

This will allows basic view .


Comments

Popular posts from this blog

ENOENT: no such file or directory, rename : node_modules/async

react-quill Integrate quill-image-resize-module