Bootstrap3 Ajax Typeahead Templating

Plugin URL : https://github.com/biggora/bootstrap-ajax-typeahead


[sourcecode language="javascript"]
<script type="text/javascript">
    var items;
$("#search_item").typeahead({
    onSelect: function(item) {
        add_order_item(item.value);
    },
      updater: function (item) {
        return item;
    },
    highlighter: function(name){
         var item = _.find(items, function (c) {
                        return c.name == name;
                    });
           
        var itm = ''
                 + "<div class='typeahead_wrapper'>"
                 + "<div class='typeahead_labels'>"
                 + "<div class='typeahead_primary'><span class='pname'>" + item.name + "</span></div>"
                 + "<div class='typeahead_secondary'><span class='pprice'>Rs. "+ item.purchase_price +"</span><div>"
                 + "<div class='typeahead_secondary'>Code: "+ item.code +" / SKU: " + item.sku + "</div>"
                 + "</div>"
                 + "</div>";
                    return itm;
    },
            
    ajax: {
        url: "<?php echo base_url('items/suggest_json');?>",
        timeout: 500,
        item: '<li><a href="#"></a><p>fgfg</p></li>' ,
        scrollBar: true,
        valueField: "id",
        displayField: "name",
        triggerLength: 1,
        method: "get",
        loadingClass: "loading-circle",
        preDispatch: function (query) {
            //showLoadingMask(true);
            return {
                search: query
            }
        },
        preProcess: function (data) {
            //showLoadingMask(false);
            if (data.success === false) {
                // Hide the list, there was some error
                return false;
            }
            // We good!
            items = data.results;
            return data.results;
        }         
    }
});

function add_order_item(item_id){
alert(item_id);
</script>
[/sourcecode]

DataTables Server Side Processing with CodeIgniter

[caption id="attachment_1101" align="aligncenter" width="273"] DataTables[/caption]

In this tutorial, we will see how to use popular dataTables with CodeIgniter framework. Note that, pagination is done in client side for this tutorial. Hence this example is not ideal for a big data set. Handling pagination in server side will be discussed in  a future tutorial.

Table format

[sourcecode language="html"]
                             <th>Need identified thru</th>
                                        <th>Total Estimate</th>
                                        <th class="no-sort"></th>
                                        <th class="no-sort"></th>

                                    </tr>
                                </thead>

                            </table>

[/sourcecode]

Initializing and fetching data with ajax

[sourcecode language="javascript"]

<script>
    $(document).ready(function() {
        $('#dataTables').dataTable({
            "ajax": "<?php echo base_url('test/get_json'); ?>",
            "pageLength": <?php echo $this->config->item('results_per_page'); ?>,
            "order": [[ 0, "desc" ]],
            "aoColumnDefs": [
                { "bVisible": false, "aTargets": [0] },
                {
                    "bSortable": false,
                    "aTargets": ["no-sort"]  
                }],
            "dom": 'T<"clear">lfrtip',
            tableTools: {
                "sSwfPath": "<?php echo base_url("plugins/data_tables/extensions/TableTools/swf/copy_csv_xls_pdf.swf"); ?>"
            }
        });
});
</script>
[/sourcecode]

Test Controller

[sourcecode language="php"]
class Test extends CI_Controller {
public function get_json() {
        $this->load->model('test_model');
        $results = $this->test_model->load_grid();
        $data = array();
        foreach ($results  as $r) {
            array_push($data, array(
                $r['rname'],
                $r['year'],
                $r['mname'],
                $r['need'],
                $r['total_cost'],
                anchor('test/view/' . $r['id'], 'View'),
                anchor('test/edit/' . $r['id'], 'Edit')
            ));
        }

        echo json_encode(array('data' => $data));
    }
}
[/sourcecode]

Model

[sourcecode language="php"]
class Test_model extends CI_Model {
public function load_grid() {
        $this->db->select("$this->tbl_urgent_needs.unid,$this->tbl_urgent_needs.year,$this->tbl_urgent_needs.needi,$this->tbl_urgent_needs.total_cost,$this->tbl_maintenance_type.name AS mname,$this->tbl_roads.name AS rname");
        $this->db->from("$this->tbl_urgent_needs");
        $this->db->join("$this->tbl_roads", "$this->tbl_roads.rid = $this->tbl_urgent_needs.rd_id");
        $this->db->join("$this->tbl_maintenance_type", "$this->tbl_maintenance_type.id = $this->tbl_urgent_needs.maint_type_id", "left");
        $this->db->order_by("$this->tbl_urgent_needs.unid", 'ASC');

        $query = $this->db->get();
        return $query->result_array();
    }
}

[/sourcecode]

Change the SRID of exisisting data in PostGIS

http://gis.stackexchange.com/a/34613/14109