Non Order Column - show stop icon

SalmanS

Hello Everyone,

I saw somewhere for a non orderable column, when mouse over on column header

<th>Actions</th> , you see a stop icon.

Q1) How do I achieve this please in using DataTable

Q2) in my code below i got edit, delete and read buttons, i would like to know how I could call a modal window and pass or bind the data:'id' value, so the respective modal window will open with the correct record.

Q3) The search on date filed, in my case is hiredata, the datatable search for dates, how to achieve this please.

                             'columns': [{
                                    data: 'id'
                                },
                                {
                                    data: 'emp_name'
                                },
                                {
                                    data: 'salary'
                                },
                                {
                                    data: 'gender'
                                },
                                {
                                    data: 'city'
                                },
    {
                                    data: 'hiredate'
                                },
                                        {


                             "bSortable": false,
                            "orderable":      false,
                            "data":  "null",
                            "className": "center",
                    "defaultContent": '<a type="button" class="edit btn btn-default btn-sm"> <span class="glyphicon glyphicon-edit"></span></a>  <a type="button" class="delete btn btn-default btn-sm" > <span class="glyphicon glyphicon-trash"></span></a>  <a type="button" class="view btn btn-default btn-sm" > <i class="fa fa-folder-open" aria-hidden="true"></i></a>'

                        }
                            ]

colin

Hi @SalmanS ,

1. You can modify the title attribute in columns.render (something like this)

2. This SO thread may help

3. All fields are searchable, so I don't understand why this one wouldn't be. A test case is needed here for this. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

Cheers,

Colin

SalmanS

Many thanks Colin,

Q1)

I tried the following and able to capture the value for column(0)

$(document).on('click', '.edit', function(){
var ids = $(this).closest("tr").find('td:eq(0)').text();
console.log( "my id"+ ids );

Since I am using responsive.nightly, the moment you switch to mobile mode it is capturing responsive values of the columns i.e., column 3 4 5... not eq(0) column (0).

am I missing something?

SalmanS

Tried this two still its capturing responsive column 0 instead of row column 0

 // get the tr (two parents up from the button)
    var tr = $(this).parent().parent();
    // row name is the name of the first child's text
    var row_name = tr.children().first().text();

SalmanS

$('#btn').click(function (){
    var dataArr = [];
    $.each($("#example tr.selected"),function(){ //get each tr which has selected class
        dataArr.push($(this).find('td').eq(0).text()); //find its first td and push the value
        //dataArr.push($(this).find('td:first').text()); You can use this too
    });
    console.log(dataArr);
});

colin

Hi @SalmanS ,

There's a lot going on there - it would help if you could produce a test case or link to your page. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

SalmanS

Many thanks colin,
Here is my js datatable:
live.datatables.net/gocuzusa/6/edit

SalmanS

I manage to get it working by adding a extra column and retrieving by using echo json_encode ($response) and I am not sure is there any better way to achieve this.

======= PHP ServerSide ============

`## Run loop of records and returns as json_encode

    foreach ($stmt as $row) 
    {
    $data[] = array 
    (
        "emp_no"        =>$row['emp_no'],
        "first_name"    =>$row['first_name'],
        "last_name"     =>$row['last_name'],
        "gender"        =>$row['gender'],
        "hire_date"     =>$row['hire_date'],
        "action"            =>'<button type="button"  id="editBtn" value="'.$row['emp_no'].'"><span class="glyphicon glyphicon-edit"></span></button> <button type="button" class="btn btn-success" id="delBtn"  value="'.$row['emp_no'].'">Delete</button> <button type="button" class="btn btn-success" id="viewBtn" value="'.$row['emp_no'].'">View</button>',

    );
    }

Response`

==== Javascript ====

    v    ar dataTable =     $('#empTable').DataTable({
                        'processing': true,
                        'serverSide': true,
                        'serverMethod': 'post',
                        'ajax': {
                            'url':'ajaxfile.php',
                            error: function(jqXHR, ajaxOptions, thrownError) {
                          alert(thrownError + "\r\n" + jqXHR.statusText + "\r\n" + jqXHR.responseText + "\r\n" + ajaxOptions.responseText);
                        }
                        },
                        cache: false,
                        'columns': [
                            { data: 'emp_no' },
                            { data: 'first_name' },
                            { data: 'last_name' },
                            { data: 'gender' },
                            { data: 'hire_date',
                            "render": function (data) {
                var dateObj = new Date(data);
                var month = ('0' + (dateObj.getMonth() + 1)).slice(-2);
                var date = ('0' + dateObj.getDate()).slice(-2);
                var year = dateObj.getFullYear();
                //var shortDate = year + '/' + month + '/' + date;
                return (date + '/' + month + '/' + year);
            } 


            },

                            { data: 'action' }

                        ],
                        rowReorder: {
                    dataSrc: 'id'
                    }



                    });

                     $(document).on('click', '#editBtn', function(){
          var user_id = $(this).val();
          alert(user_id);

         });

colin

Hi @SalmanS ,

Glad all working, yep, seems a reasonable way to go.

Cheers,

Colin