0

I have a data table in which I am adding values dynamically . There is a column having button as stars . I want to sort the table so that entry with minimum stars sort button will come first.

I have tried doing it using the data tables sort provided in datatables.

  s=s+'<thead>'+
                        '<tr role=\"row\">'+
                        '<th>Sr.No</th>'+
                        '<th width="128">Company Name</th>'+

                        '<th>A</th>'+
                        '<th>B</th>'+
                        '<th>C</th>'+
                        '<th>D</th>'+
                        '</tr>'+
                        '</thead>'+
                        '<tbody>';
                for(i=0;i<jsonData.array_list.length;i++)
                    {
                    j[i]=i;
                    s=s+'<tr>'+
                    '<td>'+(i+1)+'</td>'+
                    '<td id="A-{i}"        width="64">'+jsonData.array_list[i]["A"]+'</td>'+
                     /*'<td>'+jsonData.array_list[i]["B"]+'</td>'+
                    '<td>'+jsonData.array_list[i]["year_founded"]+'</td>'+*/
                    '<td>'+jsonData.array_list[i]["C"]+'</td>'+
                    '<td nowrap>';

                     if(jsonData.array_list[i].details_content_complete==='1')
                        {
                        s=s+'<button class="btn btn-sm btn-white btn-social-icon"><i class="fa fa-star" style="color:#FF9900;font-size:20px;border:1px solid #dadada;padding:1px;"></i></button>';
                        }
                    else{
                        s=s+'<button class="btn btn-sm btn-white btn-social-icon"><i class="fa fa-star-o" style="color:#DADADA;font-size:20px;border:1px solid #dadada;padding:1px;"></i></button>';
                    }


                    s=s.replace(/{i}/g, i+1);

                    }
                s=s+'</tbody>';

              $("#userListTable").html(s);
        var table=$('#userListTable').DataTable( {
                    data: arr,
                    columns: [
                       { title: "D"}
                    ]
                } );
kaustubh joshi
  • 1
  • 4
  • 1
    Possible duplicate of [Custom sorting on values in a data-sort attribute with Jquery Datatables](https://stackoverflow.com/questions/20286162/custom-sorting-on-values-in-a-data-sort-attribute-with-jquery-datatables) – connexo Aug 21 '19 at 06:56
  • 1
    If by *'adding values dynamically'* you mean, you inject `` HTML, that's a waste of resources, first of all, and, second, it disables major part of rich DataTables [API](https://datatables.net/reference/api) that could've solved your issue pretty easy. So, share wider code sample (preferably in a live snippet format) so it's visible how exactly you populate datatables with data and implement actual *'stars'* and I'm pretty sure I can suggest simple solution. – Yevhen Horbunkov Aug 21 '19 at 07:54
  • yes first i am creating html string from the input and then using #("#datatable").append(s); to append the string. – kaustubh joshi Aug 21 '19 at 11:12
  • ...as being said, not efficient approach, whatsoever.. Nonetheless, you may check out the link in the very first comment - if you append `data-sort` attribute to your `` nodes (it may have value 1 through 5, depending on the number of stars), so you'll be able to sort that column (lexically). – Yevhen Horbunkov Aug 21 '19 at 15:11
  • Thank you @connexo It worked for me! .@YevgenGorbunkov can you please suggest better solution about dynamically adding data. – kaustubh joshi Aug 22 '19 at 06:28

0 Answers0