كيفية الفرز حسب التاريخ مع Datatables JQuery Plugin؟

Question

أنا أستخدم المكون الإضافي JQuery DataTables وأريد أن أقوم بفرزها حسب التواريخ.

أعلم أنهم حصلوا على مكون إضافي ولكن لا يمكنني العثور على مكان تنزيله فعليًا

http://datatables.net/plug-ins/sorting

أعتقد أنني بحاجة إلى هذا الملف: datatables.numericComma.js ومع ذلك لا يمكنني العثور عليه في أي مكان وعندما أقوم بتنزيل DataTables ، لا يبدو أنه في ملف zip.

أنا أيضًا لست متأكدًا مما إذا كنت بحاجة إلى جعل خلف التاريخ المخصص الخاص بي للانتقال إلى هذا البرنامج المساعد.

أحاول فرز هذا التنسيق MM/DD/YYYY HH: MM TT (AM | PM)

شكرًا

يحرر

كيف يمكنني تغيير هذا إلى الفرز حسب MM/DD/YYYY HH: MM TT (AM | PM) وتغييره إلى تاريخنا؟

jQuery.fn.dataTableExt.oSort['uk_date-asc']  = function(a,b) {
    var ukDatea = a.split('/');
    var ukDateb = b.split('/');

    var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
    var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

    return ((x < y) ? -1 : ((x > y) ?  1 : 0));
};

jQuery.fn.dataTableExt.oSort['uk_date-desc'] = function(a,b) {
    var ukDatea = a.split('/');
    var ukDateb = b.split('/');

    var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
    var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

    return ((x < y) ? 1 : ((x > y) ?  -1 : 0));
};

Answer 1

انقر على رابط "عرض تفاصيل" تحت التاريخ (DD/mm/yyy), ، ثم يمكنك نسخ ولصق رمز البرنامج المساعد هذا المقدم هناك

---

تحديث: أعتقد أنه يمكنك فقط تبديل ترتيب الصفيف ، مثل ذلك:

jQuery.fn.dataTableExt.oSort['us_date-asc']  = function(a,b) {
    var usDatea = a.split('/');
    var usDateb = b.split('/');

    var x = (usDatea[2] + usDatea[0] + usDatea[1]) * 1;
    var y = (usDateb[2] + usDateb[0] + usDateb[1]) * 1;

    return ((x < y) ? -1 : ((x > y) ?  1 : 0));
};

jQuery.fn.dataTableExt.oSort['us_date-desc'] = function(a,b) {
    var usDatea = a.split('/');
    var usDateb = b.split('/');

    var x = (usDatea[2] + usDatea[0] + usDatea[1]) * 1;
    var y = (usDateb[2] + usDateb[0] + usDateb[1]) * 1;

    return ((x < y) ? 1 : ((x > y) ?  -1 : 0));
};

كل ما فعلته هو تبديل __date_[1] (يوم و __date_[0] (شهر) ، واستبدل uk مع us لذلك لن تشعر بالارتباك. أعتقد أن هذا يجب أن يعتني به لك.

---

تحديث رقم 2: يجب أن تكون قادرًا على استخدام كائن التاريخ للمقارنة. جرب هذا:

jQuery.fn.dataTableExt.oSort['us_date-asc']  = function(a,b) {
 var x = new Date(a),
     y = new Date(b);
 return ((x < y) ? -1 : ((x > y) ?  1 : 0));
};

jQuery.fn.dataTableExt.oSort['us_date-desc'] = function(a,b) {
 var x = new Date(a),
     y = new Date(b);
 return ((x < y) ? 1 : ((x > y) ?  -1 : 0));
};

Answer 2

فرز التاريخ - بعنصر خفي

تحويل التاريخ إلى التنسيق yyyymmdd والوقوف على القيمة الفعلية (MM/DD/YYYY) في ال <td>, ، لفه في عنصر ، قم بتعيين النمط display:none; إلى العناصر. الآن سيعمل فرز التاريخ كنوع عادي. يمكن تطبيق الشيء نفسه على نوع الوقت.

لغة البرمجة

<table id="data-table">
   <tr>
     <td><span>YYYYMMDD</span>MM/DD/YYYY</td>
   </tr>
</table>

CSS

#data-table span {
    display:none; 
}

Answer 3

يجب عليك الاستفادة من سمات بيانات HTML5. https://www.datatables.net/examples/advanced_init/html5-data-attributes.html

فقط أضف ترتيب البيانات عنصر لك عنصر TD.
لا ملحقات مطلوبة.

<table class="table" id="exampleTable">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Sign Up Date</th>
        </tr>
    </thead>

    <tbody>

        <tr>
            <td>Peter</td>
            <td data-order="2015-11-13 12:00">13. November 2015</td>
        </tr>
        <tr>
            <td>Daniel</td>
            <td data-order="2015-08-06 13:44">06. August 2015</td>
        </tr>
        <tr>
            <td>Michael</td>
            <td data-order="2015-10-14 16:12">14. October 2015</td>
        </tr>
    </tbody>
</table>


<script>
    $(document).ready(function() {
        $('#exampleTable').DataTable();
    });
</script>

Answer 4

أدرك أن هذا سؤال عمره عامين ، لكنني ما زلت أجد أنه مفيد. انتهى بي الأمر باستخدام رمز العينة الذي توفره Fudgey ولكن مع تعديل بسيط. أنقذني بعض الوقت ، شكرا!

jQuery.fn.dataTableExt.oSort['us_date-asc']  = function(a,b) { 
  var x = new Date($(a).text()),
  y = new Date($(b).text());
  return ((x < y) ? -1 : ((x > y) ?  1 : 0)); 
}; 

jQuery.fn.dataTableExt.oSort['us_date-desc'] = function(a,b) { 
  var x = new Date($(a).text()),
  y = new Date($(b).text());
  return ((x < y) ? 1 : ((x > y) ?  -1 : 0)); 
}; 

Answer 5

اعتبارًا من عام 2015 ، فإن الطريقة الأكثر ملاءمة وفقًا لي لفرز عمود التاريخ في DataTable ، تستخدم ملف مطلوب فرز البرنامج المساعد. منذ تنسيق التاريخ في حالتي كان dd/mm/yyyy hh:mm:ss, ، انتهى بي الأمر باستخدام Plugin Date-Euro. كل ما يحتاجه المرء هو:

الخطوة 1: قم بتضمين البرنامج المساعد الفرز ملف JavaScript أو رمز و ؛

الخطوة 2: يضيف columnDefs كما هو موضح أدناه لاستهداف العمود (العمود) المناسب.

$('#example').dataTable( {
    columnDefs: [
       { type: 'date-euro', targets: 0 }
    ]
});

Answer 6

يمكن أن تطلب Datatables فقط DateTime في "ISO-8601" التنسيق ، لذلك عليك تحويل تاريخك في "طلب التاريخ" إلى هذا التنسيق (مثال باستخدام الحلاقة):

<td data-sort="@myDate.ToString("o")">@myDate.ToShortDateString() - @myDate.ToShortTimeString()</td>

Answer 7

فقط في حال يواجه شخص ما مشكلة في وجود مساحات فارغة إما في قيم التاريخ أو في الخلايا ، سيتعين عليك التعامل مع هذه البتات. في بعض الأحيان ، لا يتم التعامل مع المساحة الفارغة عن طريق وظيفة القطع القادمة من HTML ، إنها مثل "$ nbsp ؛". إذا لم تتعامل معها ، فلن يعمل الفرز الخاص بك بشكل صحيح وسوف يكسر أين توجد مساحة فارغة.

حصلت على هذا الكود من امتدادات jQuery هنا أيضًا وقمت بتغييره قليلاً لتناسب متطلباتي. يجب أن تفعل الشيء نفسه :) هتافات!

function trim(str) {
    str = str.replace(/^\s+/, '');
    for (var i = str.length - 1; i >= 0; i--) {
        if (/\S/.test(str.charAt(i))) {
            str = str.substring(0, i + 1);
            break;
        }
    }
    return str;
}

jQuery.fn.dataTableExt.oSort['uk-date-time-asc'] = function(a, b) {
    if (trim(a) != '' && a!=" ") {
        if (a.indexOf(' ') == -1) {
            var frDatea = trim(a).split(' ');
            var frDatea2 = frDatea[0].split('/');
            var x = (frDatea2[2] + frDatea2[1] + frDatea2[0]) * 1;
        }
        else {
            var frDatea = trim(a).split(' ');
            var frTimea = frDatea[1].split(':');
            var frDatea2 = frDatea[0].split('/');
            var x = (frDatea2[2] + frDatea2[1] + frDatea2[0] + frTimea[0] + frTimea[1] + frTimea[2]) * 1;
        }
    } else {
        var x = 10000000; // = l'an 1000 ...
    }

    if (trim(b) != '' && b!=" ") {
        if (b.indexOf(' ') == -1) {
            var frDateb = trim(b).split(' ');
            frDateb = frDateb[0].split('/');
            var y = (frDateb[2] + frDateb[1] + frDateb[0]) * 1;
        }
        else {
            var frDateb = trim(b).split(' ');
            var frTimeb = frDateb[1].split(':');
            frDateb = frDateb[0].split('/');
            var y = (frDateb[2] + frDateb[1] + frDateb[0] + frTimeb[0] + frTimeb[1] + frTimeb[2]) * 1;
        }
    } else {
        var y = 10000000;
    }
    var z = ((x < y) ? -1 : ((x > y) ? 1 : 0));
    return z;
};

jQuery.fn.dataTableExt.oSort['uk-date-time-desc'] = function(a, b) {
    if (trim(a) != '' && a!="&nbsp;") {
        if (a.indexOf(' ') == -1) {
            var frDatea = trim(a).split(' ');
            var frDatea2 = frDatea[0].split('/');
            var x = (frDatea2[2] + frDatea2[1] + frDatea2[0]) * 1;
        }
        else {
            var frDatea = trim(a).split(' ');
            var frTimea = frDatea[1].split(':');
            var frDatea2 = frDatea[0].split('/');
            var x = (frDatea2[2] + frDatea2[1] + frDatea2[0] + frTimea[0] + frTimea[1] + frTimea[2]) * 1;
        }
    } else {
        var x = 10000000;
    }

    if (trim(b) != '' && b!="&nbsp;") {
        if (b.indexOf(' ') == -1) {
            var frDateb = trim(b).split(' ');
            frDateb = frDateb[0].split('/');
            var y = (frDateb[2] + frDateb[1] + frDateb[0]) * 1;
        }
        else {
            var frDateb = trim(b).split(' ');
            var frTimeb = frDateb[1].split(':');
            frDateb = frDateb[0].split('/');
            var y = (frDateb[2] + frDateb[1] + frDateb[0] + frTimeb[0] + frTimeb[1] + frTimeb[2]) * 1;
        }
    } else {
        var y = 10000000;
    }

    var z = ((x < y) ? 1 : ((x > y) ? -1 : 0));
    return z;
};

Answer 8

حول التحديث رقم 1 ، هناك مشكلتان:

• عدد الأيام = 1 (D/mm/yyyy) بدلاً من (Dd/mm/yyyy)
• تاريخ فارغ

هذا هو الحل لتجنب هذه المشاكل:

jQuery.fn.dataTableExt.oSort['uk_date-asc'] = function (a, b) {
            var ukDatea = a.split('/');
            var ukDateb = b.split('/');

            //Date empty
             if (ukDatea[0] == "" || ukDateb[0] == "") return 1;

            //need to change Date (d/MM/YYYY) into Date (dd/MM/YYYY) 
            if(ukDatea[0]<10) ukDatea[0] = "0" + ukDatea[0]; 
            if(ukDateb[0]<10) ukDateb[0] = "0" + ukDateb[0];

            var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
            var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

            return ((x < y) ? -1 : ((x > y) ? 1 : 0));
        };

        //Sorting by Date 
        jQuery.fn.dataTableExt.oSort['uk_date-desc'] = function (a, b) {
            var ukDatea = a.split('/');
            var ukDateb = b.split('/');

             //Date empty
             if (ukDatea[0] == "" || ukDateb[0] == "") return 1;

            //MANDATORY to change Date (d/MM/YYYY) into Date (dd/MM/YYYY) 
            if(ukDatea[0]<10) ukDatea[0] = "0" + ukDatea[0]; 
            if(ukDateb[0]<10) ukDateb[0] = "0" + ukDateb[0];

            var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
            var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

            return ((x < y) ? 1 : ((x > y) ? -1 : 0));
        };

Answer 9

اتبع الرابطhttps://datatables.net/blog/2014-12-18

طريقة سهلة للغاية لدمج الطلب حسب التاريخ.

<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/plug-ins/1.10.19/sorting/datetime-moment.js"></script>

ضع هذا الرمز قبل تهيئة DataTable:

$(document).ready(function () {
    // ......
    $.fn.dataTable.moment('DD-MMM-YY HH:mm:ss');
    $.fn.dataTable.moment('DD.MM.YYYY HH:mm:ss');
    // And any format you need
}

Answer 10

حصلت على حل بعد العمل طوال اليوم. إنه حل محلول صغير مضاف داخل علامة TD

<td><span><%= item.StartICDate %></span></td>. 

تنسيق التاريخ الذي يستخدمه هو DD/MM/YYYY. تم اختباره في Datatables1.9.0

Answer 11

قم بإنشاء عمود مخفي "Dateorder" (على سبيل المثال) مع تاريخ السلسلة مع تنسيق "YyyyMMDDHHMMSS" واستخدم الخاصية "OrderData" للإشارة إلى هذا العمود.

var myTable = $("#myTable").dataTable({
 columns: [
      { data: "id" },
      { data: "date", "orderData": 4 },
      { data: "name" },
      { data: "total" },
      { data: "dateOrder", visible: false }
 ] });