Non Order Column - show stop icon

Non Order Column - show stop icon

SalmanSSalmanS Posts: 102Questions: 12Answers: 0
edited January 2019 in Free community support

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>'

                        }
                            ]

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • SalmanSSalmanS Posts: 102Questions: 12Answers: 0
    edited January 2019

    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?

  • SalmanSSalmanS Posts: 102Questions: 12Answers: 0

    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();
    
  • SalmanSSalmanS Posts: 102Questions: 12Answers: 0
    $('#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);
    });
    
  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • SalmanSSalmanS Posts: 102Questions: 12Answers: 0

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

  • SalmanSSalmanS Posts: 102Questions: 12Answers: 0

    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);
    
             });
    
  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    Answer ✓

    Hi @SalmanS ,

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

    Cheers,

    Colin

This discussion has been closed.