Datatable sort column based on span attribute value
I have a column on my data table where i use specific function to create label
<td class="status sorting_1" ><span class="new badge blue" data-badge-caption="In progress"></span></td>
i want to sort base on data-badge-caption="In progress"
i have three value In progress / completed / queued
the column target is targets: [7]
function createStatusLabel(e, t) {
var a = statuses[e].label || "label-default",
s = '<span class="label ' + a + '">' + e + "</span>";
s= '<span class="new badge '+ a +'" data-badge-caption="' + e + '"></span>';
"Scheduled" != e && "Retrying" != e || (s = '<span class="label ' + a + '" data-toggle="tooltip" data-placement="top" data-html="true" title="' + ("Scheduled to send at " + t) + '">' + e + "</span>");
return s
}
columnDefs: [{
orderable: false,
targets: "no-sort"
},
{
className: "color-sent",
targets: [2]
},
{
className: "color-opened",
targets: [3]
},
{
className: "color-clicked",
targets: [4]
},
{
className: "color-success",
targets: [5]
},
{
className: "color-reported",
targets: [6]
},
{
className: "status",
render: function(e, t, a) {
return createStatusLabel(e, a[7])
},
targets: [7]
}
],
order: [
[1, "desc"]
]
});
<td class="status sorting_1" ><span class="new badge blue" data-badge-caption="In progress"></span></td>
i want to sort base on data-badge-caption="In progress"
i have three value In progress / completed / queued
the column target is targets: [7]
function createStatusLabel(e, t) {
var a = statuses[e].label || "label-default",
s = '<span class="label ' + a + '">' + e + "</span>";
s= '<span class="new badge '+ a +'" data-badge-caption="' + e + '"></span>';
"Scheduled" != e && "Retrying" != e || (s = '<span class="label ' + a + '" data-toggle="tooltip" data-placement="top" data-html="true" title="' + ("Scheduled to send at " + t) + '">' + e + "</span>");
return s
}
columnDefs: [{
orderable: false,
targets: "no-sort"
},
{
className: "color-sent",
targets: [2]
},
{
className: "color-opened",
targets: [3]
},
{
className: "color-clicked",
targets: [4]
},
{
className: "color-success",
targets: [5]
},
{
className: "color-reported",
targets: [6]
},
{
className: "status",
render: function(e, t, a) {
return createStatusLabel(e, a[7])
},
targets: [7]
}
],
order: [
[1, "desc"]
]
});
Last Comment
ASKER
ok but how i can render the td and add the attribute
data-order=
Hi,
You simply display it the same way you display your data...
I'm using PHP
If $myvalue == "due" echo data-order= "1" and so on based on condition the same way you display the other information based on condition
You simply display it the same way you display your data...
I'm using PHP
If $myvalue == "due" echo data-order= "1" and so on based on condition the same way you display the other information based on condition
ASKER
the problem i can;t modify the td and add custom attribute i am loading them from json file so if there is a way to render the column it self
In your example (in your question) you have <td class="status sorting_1" > what the status_sorting is for?
The best way will be to create a JSfiddle or share your datatables code so I can see the way you render it.
You can also use these
- Client-side processing: http://live.datatables.net/idinat/edit#javascript,html
- Server-side processing: http://live.datatables.net/idinat/2/edit
You can render your td using javascript to append the row (this is the way I do it) using Client-side processing
or using Datatables Server-side processing which is a different way to achieved the same thing
or you can simply fill an html table on page load using JSON or like me using PHP / Ajax & MySQL
Doc:
https://datatables.net/manual/server-side
https://datatables.net/manual/ajax#JSON-data-source
ASKER
http://live.datatables.net/idinat/744/edit
i need to filter the status i have queued / completed / in progress
i want to filter and sort
and also campaign name sort by date desc and have option to use search
aslo if you can share me a method to add a drop down select one i choose it it will select row based on status type and n the same time i can user search to filter other column in the table
i need to filter the status i have queued / completed / in progress
i want to filter and sort
and also campaign name sort by date desc and have option to use search
aslo if you can share me a method to add a drop down select one i choose it it will select row based on status type and n the same time i can user search to filter other column in the table
<!DOCTYPE html>
<html>
<head>
<link href="//datatables.net/download/build/nightly/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//datatables.net/download/build/nightly/jquery.dataTables.js"></script>
<meta charset=utf-8 />
<title>DataTables - JS Bin</title>
</head>
<body>
<div class="container">
<table id="campaignTable" class="table dataTable no-footer" role="grid" aria-describedby="campaignTable_info">
<thead>
<tr role="row"><th class="datetime sorting" tabindex="0" aria-controls="campaignTable" rowspan="1" colspan="1" style="width: 146px;" aria-label="Campaign Name: activate to sort column ascending">Campaign Name</th><th class="sorting_desc" tabindex="0" aria-controls="campaignTable" rowspan="1" colspan="1" style="width: 93px;" aria-label="Email Sent: activate to sort column ascending" aria-sort="descending">Email Sent</th><th class="color-sent sorting" tabindex="0" aria-controls="campaignTable" rowspan="1" colspan="1" style="width: 121px;" aria-label="Email Opened: activate to sort column ascending">Email Opened</th><th class="color-opened sorting" tabindex="0" aria-controls="campaignTable" rowspan="1" colspan="1" style="width: 103px;" aria-label="Clicked Link: activate to sort column ascending">Clicked Link</th><th class="color-clicked sorting" tabindex="0" aria-controls="campaignTable" rowspan="1" colspan="1" style="width: 109px;" aria-label="User Caught: activate to sort column ascending">User Caught</th><th class="color-success sorting" tabindex="0" aria-controls="campaignTable" rowspan="1" colspan="1" style="width: 89px;" aria-label="Reported: activate to sort column ascending">Reported</th><th class="color-reported sorting" tabindex="0" aria-controls="campaignTable" rowspan="1" colspan="1" style="width: 89px;" aria-label="Training: activate to sort column ascending">Training</th><th class="MYKEY status sorting" tabindex="0" aria-controls="campaignTable" rowspan="1" colspan="1" style="width: 89px;" aria-label="Status: activate to sort column ascending">Status</th><th class="no-sort sorting_disabled" rowspan="1" colspan="1" style="width: 89px;" aria-label="Actions">Actions</th></tr>
</thead>
<tbody>
<tr role="row" class="odd"><td class=" datetime"><div class="col s12" style="widths: 200px;"><div class="row"> <div class="col s3 mt-2 pr-0 circle"> <p data-letters="T" class="overflow-ellipsis s" "=""></p> </div> <div class="col s9 "> <a href="#"> <p class="overflow-ellipsis s" "="">test</p> </a> <p class="m-0 grey-text lighten-3">May, 6th 2020</p> </div> </div> </div></td><td class="sorting_1"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="100"> <span class="progress-left"> <span class="progress-bar border-primary" style="transform: rotate(180deg);"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary" style="transform: rotate(180deg);"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">100<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">4 Email Sent</p></div></td><td class=" color-sent"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="25"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary" style="transform: rotate(90deg);"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">25<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">1 Email Opened</p></div></td><td class=" color-opened"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="0"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">0<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">0 Clicked Link</p></div></td><td class=" color-clicked"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="0"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">0<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">0 User Caught</p></div></td><td class=" color-success"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="0"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">0<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">0 Reported</p></div></td><td class=" color-reported"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="0"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">0<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">0 Training</p></div></td><td class=" status" data-order="I"><span class="new badge blue" data-badge-caption="In progress"></span></td><td><div class="pull-right"><a class="waves-effect waves-circle btn-floating deep-purple darken-1 " href="/campaigns/7"> <i class="material-icons">pageview</i> </a><a class="waves-effect waves-circle btn-floating deep-purple darken-1 delete_button" data-campaign-id="6"> <i class="material-icons">delete</i> </a></div></td></tr><tr role="row" class="even"><td class=" datetime"><div class="col s12" style="widths: 200px;"><div class="row"> <div class="col s3 mt-2 pr-0 circle"> <p data-letters="P" class="overflow-ellipsis s" "=""></p> </div> <div class="col s9 "> <a href="#"> <p class="overflow-ellipsis s" "="">panda</p> </a> <p class="m-0 grey-text lighten-3">May, 5th 2020</p> </div> </div> </div></td><td class="sorting_1"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="100"> <span class="progress-left"> <span class="progress-bar border-primary" style="transform: rotate(180deg);"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary" style="transform: rotate(180deg);"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">100<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">3 Email Sent</p></div></td><td class=" color-sent"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="33"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary" style="transform: rotate(118.8deg);"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">33<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">1 Email Opened</p></div></td><td class=" color-opened"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="33"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary" style="transform: rotate(118.8deg);"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">33<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">1 Clicked Link</p></div></td><td class=" color-clicked"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="33"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary" style="transform: rotate(118.8deg);"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">33<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">1 User Caught</p></div></td><td class=" color-success"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="0"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">0<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">0 Reported</p></div></td><td class=" color-reported"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="0"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">0<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">0 Training</p></div></td><td class=" status" data-order="I"><span class="new badge blue" data-badge-caption="In progress"></span></td><td><div class="pull-right"><a class="waves-effect waves-circle btn-floating deep-purple darken-1 " href="/campaigns/1"> <i class="material-icons">pageview</i> </a><a class="waves-effect waves-circle btn-floating deep-purple darken-1 delete_button" data-campaign-id="0"> <i class="material-icons">delete</i> </a></div></td></tr><tr role="row" class="odd"><td class=" datetime"><div class="col s12" style="widths: 200px;"><div class="row"> <div class="col s3 mt-2 pr-0 circle"> <p data-letters="S" class="overflow-ellipsis s" "=""></p> </div> <div class="col s9 "> <a href="#"> <p class="overflow-ellipsis s" "="">stc</p> </a> <p class="m-0 grey-text lighten-3">May, 5th 2020</p> </div> </div> </div></td><td class="sorting_1"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="100"> <span class="progress-left"> <span class="progress-bar border-primary" style="transform: rotate(180deg);"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary" style="transform: rotate(180deg);"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">100<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">3 Email Sent</p></div></td><td class=" color-sent"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="33"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary" style="transform: rotate(118.8deg);"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">33<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">1 Email Opened</p></div></td><td class=" color-opened"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="33"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary" style="transform: rotate(118.8deg);"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">33<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">1 Clicked Link</p></div></td><td class=" color-clicked"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="33"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary" style="transform: rotate(118.8deg);"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">33<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">1 User Caught</p></div></td><td class=" color-success"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="0"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">0<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">0 Reported</p></div></td><td class=" color-reported"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="0"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">0<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">0 Training</p></div></td><td class=" status" data-order="C"><span class="new badge green" data-badge-caption="Completed"></span></td><td><div class="pull-right"><a class="waves-effect waves-circle btn-floating deep-purple darken-1 " href="/campaigns/2"> <i class="material-icons">pageview</i> </a><a class="waves-effect waves-circle btn-floating deep-purple darken-1 delete_button" data-campaign-id="1"> <i class="material-icons">delete</i> </a></div></td></tr><tr role="row" class="even"><td class=" datetime"><div class="col s12" style="widths: 200px;"><div class="row"> <div class="col s3 mt-2 pr-0 circle"> <p data-letters="س" class="overflow-ellipsis s" "=""></p> </div> <div class="col s9 "> <a href="#"> <p class="overflow-ellipsis s" "="">ساكو</p> </a> <p class="m-0 grey-text lighten-3">May, 5th 2020</p> </div> </div> </div></td><td class="sorting_1"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="100"> <span class="progress-left"> <span class="progress-bar border-primary" style="transform: rotate(180deg);"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary" style="transform: rotate(180deg);"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">100<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">3 Email Sent</p></div></td><td class=" color-sent"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="33"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary" style="transform: rotate(118.8deg);"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">33<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">1 Email Opened</p></div></td><td class=" color-opened"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="0"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">0<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">0 Clicked Link</p></div></td><td class=" color-clicked"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="0"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">0<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">0 User Caught</p></div></td><td class=" color-success"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="0"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">0<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">0 Reported</p></div></td><td class=" color-reported"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="0"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">0<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">0 Training</p></div></td><td class=" status" data-order="I"><span class="new badge blue" data-badge-caption="In progress"></span></td><td><div class="pull-right"><a class="waves-effect waves-circle btn-floating deep-purple darken-1 " href="/campaigns/3"> <i class="material-icons">pageview</i> </a><a class="waves-effect waves-circle btn-floating deep-purple darken-1 delete_button" data-campaign-id="2"> <i class="material-icons">delete</i> </a></div></td></tr><tr role="row" class="odd"><td class=" datetime"><div class="col s12" style="widths: 200px;"><div class="row"> <div class="col s3 mt-2 pr-0 circle"> <p data-letters="C" class="overflow-ellipsis s" "=""></p> </div> <div class="col s9 "> <a href="#"> <p class="overflow-ellipsis s" "="">covid</p> </a> <p class="m-0 grey-text lighten-3">May, 5th 2020</p> </div> </div> </div></td><td class="sorting_1"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="100"> <span class="progress-left"> <span class="progress-bar border-primary" style="transform: rotate(180deg);"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary" style="transform: rotate(180deg);"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">100<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">3 Email Sent</p></div></td><td class=" color-sent"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="33"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary" style="transform: rotate(118.8deg);"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">33<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">1 Email Opened</p></div></td><td class=" color-opened"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="33"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary" style="transform: rotate(118.8deg);"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">33<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">1 Clicked Link</p></div></td><td class=" color-clicked"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="33"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary" style="transform: rotate(118.8deg);"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">33<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">1 User Caught</p></div></td><td class=" color-success"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="0"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">0<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">0 Reported</p></div></td><td class=" color-reported"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="0"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">0<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">0 Training</p></div></td><td class=" status" data-order="I"><span class="new badge blue" data-badge-caption="In progress"></span></td><td><div class="pull-right"><a class="waves-effect waves-circle btn-floating deep-purple darken-1 " href="/campaigns/4"> <i class="material-icons">pageview</i> </a><a class="waves-effect waves-circle btn-floating deep-purple darken-1 delete_button" data-campaign-id="3"> <i class="material-icons">delete</i> </a></div></td></tr><tr role="row" class="even"><td class=" datetime"><div class="col s12" style="widths: 200px;"><div class="row"> <div class="col s3 mt-2 pr-0 circle"> <p data-letters="S" class="overflow-ellipsis s" "=""></p> </div> <div class="col s9 "> <a href="#"> <p class="overflow-ellipsis s" "="">stc</p> </a> <p class="m-0 grey-text lighten-3">May, 5th 2020</p> </div> </div> </div></td><td class="sorting_1"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="100"> <span class="progress-left"> <span class="progress-bar border-primary" style="transform: rotate(180deg);"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary" style="transform: rotate(180deg);"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">100<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">3 Email Sent</p></div></td><td class=" color-sent"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="33"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary" style="transform: rotate(118.8deg);"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">33<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">1 Email Opened</p></div></td><td class=" color-opened"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="0"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">0<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">0 Clicked Link</p></div></td><td class=" color-clicked"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="0"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">0<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">0 User Caught</p></div></td><td class=" color-success"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="0"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">0<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">0 Reported</p></div></td><td class=" color-reported"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="0"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">0<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">0 Training</p></div></td><td class=" status" data-order="I"><span class="new badge blue" data-badge-caption="In progress"></span></td><td><div class="pull-right"><a class="waves-effect waves-circle btn-floating deep-purple darken-1 " href="/campaigns/5"> <i class="material-icons">pageview</i> </a><a class="waves-effect waves-circle btn-floating deep-purple darken-1 delete_button" data-campaign-id="4"> <i class="material-icons">delete</i> </a></div></td></tr><tr role="row" class="odd"><td class=" datetime"><div class="col s12" style="widths: 200px;"><div class="row"> <div class="col s3 mt-2 pr-0 circle"> <p data-letters="S" class="overflow-ellipsis s" "=""></p> </div> <div class="col s9 "> <a href="#"> <p class="overflow-ellipsis s" "="">saco</p> </a> <p class="m-0 grey-text lighten-3">May, 6th 2020</p> </div> </div> </div></td><td class="sorting_1"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="100"> <span class="progress-left"> <span class="progress-bar border-primary" style="transform: rotate(180deg);"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary" style="transform: rotate(180deg);"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">100<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">3 Email Sent</p></div></td><td class=" color-sent"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="33"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary" style="transform: rotate(118.8deg);"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">33<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">1 Email Opened</p></div></td><td class=" color-opened"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="33"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary" style="transform: rotate(118.8deg);"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">33<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">1 Clicked Link</p></div></td><td class=" color-clicked"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="33"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary" style="transform: rotate(118.8deg);"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">33<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">1 User Caught</p></div></td><td class=" color-success"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="0"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">0<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">0 Reported</p></div></td><td class=" color-reported"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="0"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">0<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">0 Training</p></div></td><td class=" status" data-order="I"><span class="new badge blue" data-badge-caption="In progress"></span></td><td><div class="pull-right"><a class="waves-effect waves-circle btn-floating deep-purple darken-1 " href="/campaigns/6"> <i class="material-icons">pageview</i> </a><a class="waves-effect waves-circle btn-floating deep-purple darken-1 delete_button" data-campaign-id="5"> <i class="material-icons">delete</i> </a></div></td></tr><tr role="row" class="even"><td class=" datetime"><div class="col s12" style="widths: 200px;"><div class="row"> <div class="col s3 mt-2 pr-0 circle"> <p data-letters="A" class="overflow-ellipsis s" "=""></p> </div> <div class="col s9 "> <a href="#"> <p class="overflow-ellipsis s" "="">asdassa</p> </a> <p class="m-0 grey-text lighten-3">May, 17th 2020</p> </div> </div> </div></td><td class="sorting_1"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="100"> <span class="progress-left"> <span class="progress-bar border-primary" style="transform: rotate(180deg);"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary" style="transform: rotate(180deg);"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">100<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">2 Email Sent</p></div></td><td class=" color-sent"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="50"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary" style="transform: rotate(180deg);"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">50<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">1 Email Opened</p></div></td><td class=" color-opened"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="50"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary" style="transform: rotate(180deg);"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">50<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">1 Clicked Link</p></div></td><td class=" color-clicked"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="0"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">0<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">0 User Caught</p></div></td><td class=" color-success"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="0"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">0<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">0 Reported</p></div></td><td class=" color-reported"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="0"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">0<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">0 Training</p></div></td><td class=" status" data-order="I"><span class="new badge blue" data-badge-caption="In progress"></span></td><td><div class="pull-right"><a class="waves-effect waves-circle btn-floating deep-purple darken-1 " href="/campaigns/9"> <i class="material-icons">pageview</i> </a><a class="waves-effect waves-circle btn-floating deep-purple darken-1 delete_button" data-campaign-id="8"> <i class="material-icons">delete</i> </a></div></td></tr><tr role="row" class="odd"><td class=" datetime"><div class="col s12" style="widths: 200px;"><div class="row"> <div class="col s3 mt-2 pr-0 circle"> <p data-letters="S" class="overflow-ellipsis s" "=""></p> </div> <div class="col s9 "> <a href="#"> <p class="overflow-ellipsis s" "="">sadd</p> </a> <p class="m-0 grey-text lighten-3">May, 17th 2020</p> </div> </div> </div></td><td class="sorting_1"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="100"> <span class="progress-left"> <span class="progress-bar border-primary" style="transform: rotate(180deg);"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary" style="transform: rotate(180deg);"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">100<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">2 Email Sent</p></div></td><td class=" color-sent"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="50"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary" style="transform: rotate(180deg);"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">50<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">1 Email Opened</p></div></td><td class=" color-opened"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="50"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary" style="transform: rotate(180deg);"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">50<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">1 Clicked Link</p></div></td><td class=" color-clicked"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="0"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">0<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">0 User Caught</p></div></td><td class=" color-success"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="0"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">0<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">0 Reported</p></div></td><td class=" color-reported"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="0"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">0<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">0 Training</p></div></td><td class=" status" data-order="I"><span class="new badge blue" data-badge-caption="In progress"></span></td><td><div class="pull-right"><a class="waves-effect waves-circle btn-floating deep-purple darken-1 " href="/campaigns/10"> <i class="material-icons">pageview</i> </a><a class="waves-effect waves-circle btn-floating deep-purple darken-1 delete_button" data-campaign-id="9"> <i class="material-icons">delete</i> </a></div></td></tr><tr role="row" class="even"><td class=" datetime"><div class="col s12" style="widths: 200px;"><div class="row"> <div class="col s3 mt-2 pr-0 circle"> <p data-letters="C" class="overflow-ellipsis s" "=""></p> </div> <div class="col s9 "> <a href="#"> <p class="overflow-ellipsis s" "="">Copy of test</p> </a> <p class="m-0 grey-text lighten-3">May, 18th 2020</p> </div> </div> </div></td><td class="sorting_1"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="100"> <span class="progress-left"> <span class="progress-bar border-primary" style="transform: rotate(180deg);"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary" style="transform: rotate(180deg);"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">100<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">2 Email Sent</p></div></td><td class=" color-sent"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="50"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary" style="transform: rotate(180deg);"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">50<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">1 Email Opened</p></div></td><td class=" color-opened"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="50"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary" style="transform: rotate(180deg);"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">50<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">1 Clicked Link</p></div></td><td class=" color-clicked"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="0"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">0<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">0 User Caught</p></div></td><td class=" color-success"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="0"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">0<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">0 Reported</p></div></td><td class=" color-reported"><div class="col l12 m12 s12 center-align " style="padding:0px;""> <div class="progress w60 mx-auto" data-value="0"> <span class="progress-left"> <span class="progress-bar border-primary"></span> </span> <span class="progress-right"> <span class="progress-bar border-primary"></span> </span> <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center"> <div class="h2 font-weight-bold">0<sup class="small">%</sup></div> </div> </div> <!-- END --> <p class="medium-small center-align">0 Training</p></div></td><td class=" status" data-order="I"><span class="new badge blue" data-badge-caption="In progress"></span></td><td><div class="pull-right"><a class="waves-effect waves-circle btn-floating deep-purple darken-1 " href="/campaigns/11"> <i class="material-icons">pageview</i> </a><a class="waves-effect waves-circle btn-floating deep-purple darken-1 delete_button" data-campaign-id="10"> <i class="material-icons">delete</i> </a></div></td></tr></tbody>
</table>
</div>
</body>
</html>
Hi for searching I'm using Yadcf this is the best option to my opinion I'm using the external triggered way
I'm using Select2
Demo
http://yadcf-showcase.appspot.com/dom_source_externally_triggered.html
http://yadcf-showcase.appspot.com/DOM_source_select2.html
Download
https://github.com/vedmack/yadcf
I'm using Select2
Demo
http://yadcf-showcase.appspot.com/dom_source_externally_triggered.html
http://yadcf-showcase.appspot.com/DOM_source_select2.html
Download
https://github.com/vedmack/yadcf
ASKER CERTIFIED SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
JavaScript
JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.
127K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
TRUSTED BY
There is no built way to do that.
The methods I'm using
I give each status a value then I can sort them the way I want
I do prefer to use the item name / value instead of class name.
The idea is to give a value based on the case, so you can sort it based on this value.
This is usefull for example if your system is multilangual and calling a language file
Open in new window
You can also get based on the HTML
Open in new window
So here is my exampe maybe you can adapt it to your case
Open in new window
then in your datatables settings
Open in new window
Another method is by using data-order (this should work fine but can cause issue with other plugins)
Open in new window
https://datatables.net/manual/data/orthogonal-data#Computed-valuesOther methods and plugins for sorting (date, digits ect)
https://datatables.net/plug-ins/sorting/