I am trying to build a dynamic 'Post' request in Angular 2. I have a filter, consisting of inputs. I want to set them as defaults when empty and dynamically populate the request when someone uses those filters and clicks submit. So from the code snippet below I want to the user to be able to change the date and pass it to the request. So what is the best way to do this in Typescript/Angular 2?

```

ajax: {
"url": 'http://my-request.json',
"type": "POST"
},
data: {
"id":1234,
"filters":{
"type":"TCA",
"flag":false,
"description":"description",
"startdate":"20/01/2016",
"enddate":"30/01/2018"
},
"pagination":{
"startPageNumber":2,
"itemsPerPage":10
}

Hi,

I am trying a demo https://datatables.net/extensions/responsive/examples/display-types/bootstrap-modal.html when i am executing the code i am getting the same result as show in screen shot, but when i reload the page or inspect the element the modal icon is not displaying it's stop taking the css property for responsive.bootstrap.min.css

I using datatables initializing it form JS

$('#grid-view-table').DataTable({
fixedHeader: true,
searching: false,
ordering: true,
paging: false,
columns: args.titles,
info: false,
responsive: true
});

next I use:

self.dataTable.row.add(args.data[0]);
self.dataTable.row.add(args.data[1]).draw(true);

for add records and table columns gets broke and responsive is out of state...it means i cannot make it run again...

I encounter strange behavior of datatables with responsive.
When I provide column titles with basic rows, all looks ok.
But i have key data in 0 column, so I need hide it, so I add columnDefs, and hide 0 column.
After that, all columns are not responsive...

Some one knows how to use this component?

I see that topic is duplicated, how to remove this one?

I'm using these plugins together. I need to navigate through the table with arrow keys, and select entire row. It works well. But when table has lot of records after selected row jump up in view and I'm not able to list down.

Here is demo: http://jsfiddle.net/gh/gist/jquery/1.9/5f76000f0f5bb7043c2903a7e7c65bdf/

I start with an empty table html tag. I bring in data as a js array via an $.ajax request. Upon "success" of that request, I build the datatable. I explicitly set the column names and widths but there is no effect on the column widths unless I set the CSS of the table to "table-layout: fixed", which makes everything else look horrible (but the column finally has the desired width).

I'm styling with Bootstrap and I don't think I'm using any options that aren't compatible.

Here's the code.

Note:
- First row of data array from ajax request is the column titles.
- The 'columns' function is working properly.

$.ajax({
    url : "data/data.js",
    dataType : 'script',
    success : function() {
        table = $('#table1').DataTable({
            columns: columns(data[0]),
            data: rows(data),
            autoWidth: false,
            order: [[2,'desc'],[0,'asc']],
            scrollX: true,
            pageLength: 5,
            fixedColumns: {leftColumns: 1},
            fixedHeader: false
        });
       }
});

function columns(arr){
    var temp = [];
    arr.forEach(function(d,i){
        temp[i] = {};
        temp[i].title = d;
        if(d.toLowerCase()=='uds remarks') temp[i].width = "20%";
        if(d.split(' ')[d.split(' ').length-1].toLowerCase()=='date') temp[i].type = 'date';
    });
    return temp;
}
function rows(arr){
    var temp = [];
    for(i=1;i<(arr.length);i++){
        temp.push(arr[i]);
    }
    return temp;
}

Hi all,

i am currently implementing read only fields on my DataTable with inline edit enabled. My problem is that i cant find a way to render the values for inline edit. Columns have an attribute called render where you can call a function to render the value. I am currently missing the same for the editor inline edit fields. Is there a way to work around this? I cant live with unrendered values when clicking a read only inline edit field.

I tried to use the def attribute with a function call for the existing render functions, but that does not work.

I want to update the data for a single row. I don't want the entire table to redraw because it takes the person away from where they were, making it hard to work on subsequent rows back to back to back.

I grab the data for the row, manipulate one cell, and then redraw.

var temp = table.row(5).data();
temp[0] = 'Tom';
table.row(5).data(temp).draw();

This redraws the entire table. Is there a way to just redraw the row?

Hello,

I use DataTable and Bootstrap (with adminlte) and I would like to draw a green triangle in the upper right corner of some cells.
How can I do it ?

I'm filling the DataTable with ajax call (MySql) and the content of the cell is now only text (stored in the PHP variable $row['thiscolumn']).

Many thanks for your help...

T.

Hello,

I'm using DataTables with Bootstrap (Adminlte) and I would like to change the left border of cells which satisfies some conditions.

The content of the cell is rendered using "render:function ( data, type, row ){... return data['text']; }" but I would like to put a 5px green border on the left of the cell IF data['something'] is true.

How can I do that ?

Many thanks in advance,

T.

hai, im using codeginiter and data table server-side. i had 11 data and when i click for page 2 didnt change anthing, can someone help me . Here's my code :

view.php :

<script type="text/javascript">

var table;

$(document).ready(function() {

    //datatables
    table = $('#table').DataTable({

        "processing": true, //Feature control the processing indicator.
        "serverSide": true, //Feature control DataTables' server-side processing mode.
        "order": [], //Initial no order.

        // Load data for the table's content from an Ajax source
        "ajax": {
            "url": "<?php echo site_url('Buku/ajax_list')?>",
            "type": "POST"
        },

        //Set column definition initialisation properties.
        "columnDefs": [
        {
            "targets": [ 0 ], //first column / numbering column
            "orderable": false, //set not orderable
        },
        ]
    });

});
</script>

my controller :

public function ajax_list(){
        $list = $this->Mbuku->get_datatables();
        $data = array();
        $no = $_POST['start'];
        foreach ($list as $a) {
            if ($a->gambar_1 != '') {
                $b = $a->gambar_1;
            }elseif ($a->gambar_2 != '') {
                $b = $a->gambar_2;
            }elseif ($a->gambar_3 != '') {
                $b = $a->gambar_3;
            }
            $no++;
            $row = array();
            $row[] = $no;
            $row[] = $a->noisbn;
            $row[] = '<img src="'.base_url().'assets/images/buku/'.$b.'" width="60" height="80">';
            $row[] = $a->judul;
            $row[] = $a->nama_penerbit;
            $row[] = $a->nama_jenis;
            $row[] = $a->stok;
            $row[] = $a->harga;
            $row[] = '<a href="'.base_url().'index.php/Buku/edit/'.$a->noisbn.'" class="btn btn-info btn-xs">Edit</a><button class="btn btn-danger btn-xs" onclick="myFunction('.$a->noisbn.')">Delete</button>';
            $data[] = $row;
        }

        $output = array(
                        "draw" => 0,
                        "iTotalDisplayRecords" => $this->Mbuku->count_all(),
                        "iTotalRecords" =>$this->Mbuku->count_all(),
                        "data" => $data
                );
        //output to json format
        echo json_encode($output);
    }

my model :

var $table = 'buku';
    var $column_order = array(null,'buku.*','nama_penerbit','nama_jenis');
    var $column_search = array('noisbn','judul','nama_penerbit','nama_jenis','stok','harga');
    var $order = array('judul' => 'asc');

    public function __construct()
    {
        $this->load->database();
    }

    private function _get_datatables_query(){
        $this->db->from($this->table);
        $this->db->join('penerbit', 'buku.id_penerbit = penerbit.id_penerbit');
        $this->db->join('jenis', 'buku.id_jenis = jenis.id_jenis');
        $this->db->where('buku.status','1');

        $i = 0;

        foreach ($this->column_search as $item) // loop column
        {
            if($_POST['search']['value']) // if datatable send POST for search
            {

                if($i===0) // first loop
                {
                    $this->db->group_start(); // open bracket. query Where with OR clause better with bracket. because maybe can combine with other WHERE with AND.
                    $this->db->like($item, $_POST['search']['value']);
                }
                else
                {
                    $this->db->or_like($item, $_POST['search']['value']);
                }

                if(count($this->column_search) - 1 == $i) //last loop
                    $this->db->group_end(); //close bracket
            }
            $i++;
        }

        if(isset($_POST['order'])) // here order processing
        {
            $this->db->order_by($this->column_order[$_POST['order']['0']['column']], $_POST['order']['0']['dir']);
        }
        else if(isset($this->order))
        {
            $order = $this->order;
            $this->db->order_by(key($order), $order[key($order)]);
        }
    }

    function get_datatables()
    {
        $this->_get_datatables_query();
        if($_POST['length'] != -1)
        $this->db->limit($_POST['length'], $_POST['start']);
        $query = $this->db->get();
        return $query->result();
    }

    function count_filtered()
    {
        $this->_get_datatables_query();
        $query = $this->db->get();
        return $query->num_rows();
    }

    public function count_all()
    {
        $this->db->from($this->table);
        return $this->db->count_all_results();
    }

This is make me crazy. hope you can solve it. Thanks

This library can support table joins, sorting and ordering. Please find it on Github https://github.com/sajjadsaleem/datatable-codeigniter and provide me with your valuable feedback.

You can also find a http://dev4.barqsol.com/datatable here.

I have a licence for the datatables editor. I recently used the onlne generator to create a quick table and downloaded the generated DataTables.zip, however when I loading it onto the server the only thing that it brings up is the html page without any mysql connection. I have repeated the process on a different server. No editor is being loaded

Hello Allan,
I have a dom sourced table:

var table = $('#planners-table').DataTable({
        dom: 'rf',
        scrollY: 300,
        scrollCollapse: true,
        paging: false,
        order: [[1, 'asc'],[0, 'asc']]
    });

<table id="planners-table" class="row-border" cellspacing="0" width="100%">
                    <thead>
                    <tr class="hide">
                        <th></th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    <? foreach ($this->plannersAvailable as $index=> $obj): ?>
                        <tr>
                            <td><?= $obj['firstName'] . " " . $obj['lastName'] ?></td>
                            <td>
                                <div class="switch tiny round clear-margin" data-id=<?= $obj['id'] ?> data-planner="<?= $obj['firstName'].' '.$obj['lastName'] ?>"><input id="enable-<?= $obj['id'] ?>" type="checkbox" <? if ($this->planner[$obj['id']]): ?> 'checked:checked' <? endif ?>>
                                    <label for="enable-<?= $obj['id'] ?>"></label>
                                </div>
                            </td>
                        </tr>
                    <? endforeach; ?>
                    </tbody>
                </table>

The scrollY option is not providing me with the vertical scroll bar. I do get this error when the modal opens and draws my table:

Uncaught TypeError: Cannot read property 'style' of undefined
    at ka (jquery.dataTables.min.js:55)
    at Y (jquery.dataTables.min.js:13)
    at jquery.dataTables.min.js:64
    at jquery.dataTables.min.js:96
    at dispatch (jquery.js:4435)
    at r.handle (jquery.js:4121)
    at Object.trigger (jquery.js:4350)
    at jquery.js:4901
    at Function.each (jquery.js:374)
    at n.fn.init.each (jquery.js:139)

the error seems to originate from:

$(document).on('click', '#edit-arranger', function() {
        $('#planners-modal').foundation('reveal', 'open');
    });

when I open the modal not sure if that has anything to with it or not.

http://andrew.cbtat.com/user/settings (click edit 'arrangers/planners')

I have seen lots of discussion on trying to get datatables to present in a "card" or "panel" type view. I see there are lots of workarounds utilizing the various callbacks and events. I believe i have found the simplest method yet.

My method relies solely on CSS. Heres a few screen shots and a link to a sample page.
azguys.com/datatables/index.html

I have tested it out on Chrome and IE, they both seem agreeable to the CSS, no funny quirks. Give it a try and let me know what you think, and if it may have problems of other browsers.

does anybody know why

        var Lat = table.rows( indexes ).data().pluck( 'Lat' );

works, but

        var Lat = table.rows( indexes ).data().pluck( 'fi_branch.lat' );

does not?
The result is undefinded.

Could it be that pluck() has a problem with joined tables?

The corresponding line from the php files would be:

        Field::inst( 'Lat' ),

and

        Field::inst( 'fi_branch.lat' ),

I'm noticing strange behavior with Editor 1.6.1 for PHP. When I set up my PHP script to process the Editor, I only see some values being returned in the table. They happen to be only the varchar fields from the table. All integer and char fields are returning as NULL in the debug console. I have another Datatable displaying integer values just fine. After troubleshooting everything including leftJoins, where clause, and commenting out individual fields one by one, I determined that the issue seemed to lie with the table name.

Here is a bit about my setup: I'm using SQL Server 2012 R2 as the database back-end, PHP 5.4.16 running on Apache 2.4.6. Also using Bootstrap 3.3.7 and jQuery 3.1.0 scripts, but I imagine that doesn't matter much in this case. I just want to provide a complete picture to my environment.

I'll provide my server-side code to give an idea of what works and what doesn't:

This works but integer and char fields return as null values (data is actually not returned from the DB, it's not just missing from the table):

Editor::inst( $db, 'dynamic_sku_config, 'id' )
    ->fields(
        Field::inst( 'dynamic_sku_config.product_family_id' )
            ->options( Options::inst()
                ->table( 'product_family' )
                ->value( 'id' )
                ->label( 'name' )
            ),
        Field::inst( 'dynamic_sku_config.component_type_id' )
            ->options( Options::inst()
                ->table( 'component_type' )
                ->value( 'id' )
                ->label( 'name' )
            ),
        Field::inst( 'dynamic_sku_config.ordinal_position' ),
        Field::inst( 'dynamic_sku_config.following_delimiter' ),
        Field::inst( 'dynamic_sku_config.min_components' ),
        Field::inst( 'dynamic_sku_config.max_components' ),
        Field::inst( 'dynamic_sku_config.action' ),
        Field::inst( 'product_family.name' ),
        Field::inst( 'component_type.name' )
    )
    ->leftJoin( 'product_family', 'product_family.id', '=', 'dynamic_sku_config.product_family_id' )
    ->leftJoin( 'component_type', 'component_type.id', '=', 'dynamic_sku_config.component_type_id' )
    ->where( 'dynamic_sku_config.product_family_id', $_POST['selectedProductFamily'], '=' )
    ->process( $_POST )
    ->json();

In the above example, here are the database field types (each table has a field named "id" as an integer primary key):

dynamic_sku_config
product_family_id, int
component_type_id, int
ordinal_position, int
following_delimiter, char(1)
min_components, int
max_components, int
action, varchar(16)

component_type
name, varchar(50)

product_family
name, varchar(50)

Interestingly, since I'm joining to other tables for product_family and component_type, the Datatable will display the name field from the joined tables (product_family_id and component_type_id are not displayed to the user). The action field is also displayed as it is varchar. Every other field is blank due to null values coming back from the server.

I copied the contents of dynamic_sku_config into another table called dskutest. Here is the modified code (identical to above except for the table name):

Editor::inst( $db, 'dskutest', 'id' )
    ->fields(
        Field::inst( 'dskutest.product_family_id' )
            ->options( Options::inst()
                ->table( 'product_family' )
                ->value( 'id' )
                ->label( 'name' )
            ),
        Field::inst( 'dskutest.component_type_id' )
            ->options( Options::inst()
                ->table( 'component_type' )
                ->value( 'id' )
                ->label( 'name' )
            ),
        Field::inst( 'dskutest.ordinal_position' ),
        Field::inst( 'dskutest.following_delimiter' ),
        Field::inst( 'dskutest.min_components' ),
        Field::inst( 'dskutest.max_components' ),
        Field::inst( 'dskutest.action' ),
        Field::inst( 'product_family.name' ),
        Field::inst( 'component_type.name' )
    )
    ->leftJoin( 'product_family', 'product_family.id', '=', 'dskutest.product_family_id' )
    ->leftJoin( 'component_type', 'component_type.id', '=', 'dskutest.component_type_id' )
    ->where( 'dskutest.product_family_id', $_POST['selectedProductFamily'], '=' )
    ->process( $_POST )
    ->json();

All fields are now populating in the Datatable with no changes to the front-end page. I should point out that tables with a single underscore in them (e.g., product_family, component_type, etc.) work without issue. I hadn't captured the actual query being sent to the SQL Server but I could probably get it if it would be of interest or provide any clues as to why this might be happening.

I didn't see anyone else with this same issue on the forums, so I thought I would post it myself, either as a workaround for anyone encountering the same issue (or maybe a bug fix for a future release!).

Hi,
With an a ajax I add a row:

            $.ajax({
              url: '<?php echo base_url();?>roles/saveRoles',
              data:datos,
              type: "POST",
              success: function(msg) {
                var row = table.row($(this).parents('tr')).data();
                console.log(msg);
                var dat = $.parseJSON(msg);
                  if(dat.msg == '1')
                    generate('success','El registro fue guardado satifactoriamente.');
                  else
                    generate('error','Ocurrió un error al guardar el registro.');
                  $('#rol').val('');
                  $('#descripcion').val('');
                  $("#foo").modal('hide');
                        table.row.add( [
                            dat.data.id,
                            dat.data.rol,
                            dat.data.descripcion,
                            dat.data.status,
                            dat.data.accion
                        ] ).draw( false );
                }
            });

And I need to send the id by post:

        $('#datatable tbody').on( 'click','#delreg',function() {
          // var dat = table.row($(this).parents('tr')).data();
          var row = table.row($(this).parents('tr')).data();
          console.log(row[0]);
          $.ajax({
            url: '<?php echo base_url(); ?>roles/delRol',
            data: {id:row[0]},
            type: 'POST',
            success: function(msg){
              // table.row($(this).parents('tr')).remove().draw();
              // var row = table.row($(this).parents('tr'));
              // row.remove().draw();
            }
          });
        });

When the record is added with table.row.add().draw() does not send the post, but if it is loaded by default, it does

Hi,

when using the inline edit I can't get the editor to show the reported error. I think I've followed the proper instructions.
The response from the server after submit looks typically like this:

{"data":[{"id":"1479820183409","Product_code":"aaaa"}],"error":"Cannot change the product code!"}

Shouldn't that work?