2016-05-11 8 views
0

Ich benutze JS DataTables und normalerweise funktioniert die ganze Funktionalität gut. Ich habe einen interessanten Fehler bemerkt, und ich bin mir nicht sicher, was genau das verursacht.JS DataTables 'Alle' Rückgaben "Keine passenden Datensätze gefunden"

Meine Einstellungen sind bei 15, 30, 50, Alle (15, 30, 50, -1).

Grundsätzlich, wenn ich eine kleinere Anzahl von Zeilen habe, sagen Sie < 100 alles scheint in Ordnung zu sein. Ich merke jedoch, dass, wenn meine Zeilenanzahl in die Tausende geht, die spezifische Instanz, die ich gerade sehe, 3847 ist, dann zieht meine Option "Alle" keine Daten, sondern nur: "Keine übereinstimmenden Datensätze gefunden , "obwohl es 3847 Datensätze gibt, sollte es angezeigt werden." Ist dies eine Einschränkung von JS DataTables? Weiß jemand, wie man das richtig macht und tatsächlich alles zeigt, auch wenn es viel zu zeigen gibt?

Code:

var useGetAllItems = result.Count > 400 ? false : true; // maybe this is part of the problem??? 
QueueTable = $('#tblQueue').dataTable({ 
    'aLengthMenu': [[15, 30, 50, -1], [15, 30, 50, "All"]], 
    'aoColumnDefs': [ 
     { 'bSearchable': true, 'aTargets': ['_all'] }, 
     { 'bSortable': false, 'aTargets': [3] }, 
     { 'bVisible': false, 'aTargets': [6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19] }, 
     { 'iDataSort': 19, 'aTargets': [0] } 
    ], 
    'aoColumns': [ 
     { 
      'mDataProp': function (obj, type, val) { 
       return GetOrSetCellData(obj, type, val, 0); 
      } 
     }, 
     { 
      'mDataProp': function (obj, type, val) { 
       return GetOrSetCellData(obj, type, val, 1); //invoice number and index 
      } 
     }, 
     { 
      'mDataProp': function (obj, type, val) { 
       return GetOrSetCellData(obj, type, val, 2); // company 
      } 
     }, 
     { 
      'mDataProp': function (obj, type, val) { 
       return GetOrSetCellData(obj, type, val, 3); 
      } 
     }, 
     { 
      'mDataProp': function (obj, type, val) { 
       return GetOrSetCellData(obj, type, val, 4); 
      } 
     }, 
     { 
      'mDataProp': function (obj, type, val) { 
       return GetOrSetCellData(obj, type, val, 5); 
      } 
     }, 
     { 
      'mDataProp': function (obj, type, val) { 
       return GetOrSetCellData(obj, type, val, 6); 
      } 
     }, 
     { 
      'sType': 'datetime-us', //used for sorting date time... 
      'mDataProp': function (obj, type, val) { 
       return GetOrSetCellData(obj, type, val, 7); 
      } 
     }, 
     { 
      'mDataProp': function (obj, type, val) { 
       return GetOrSetCellData(obj, type, val, 8); 
      } 
     }, 
     { 
      'mDataProp': function (obj, type, val) { 
       return GetOrSetCellData(obj, type, val, 9); 
      } 
     }, 
     { 
      'mDataProp': function (obj, type, val) { 
       return GetOrSetCellData(obj, type, val, 10); 
      } 
     }, 
     { 
      'mDataProp': function (obj, type, val) { 
       return GetOrSetCellData(obj, type, val, 11); 
      } 
     }, 
     { 
      'mDataProp': function (obj, type, val) { 
       return GetOrSetCellData(obj, type, val, 12); 
      } 
     }, 
     { 
      'mDataProp': function (obj, type, val) { 
       return GetOrSetCellData(obj, type, val, 13); 
      } 
     }, 
     { 
      'mDataProp': function (obj, type, val) { 
       return GetOrSetCellData(obj, type, val, 14); 
      } 
     }, 
     { 
      'mDataProp': function (obj, type, val) { 
       return GetOrSetCellData(obj, type, val, 15); 
      } 
     }, 
     { 
      'mDataProp': function (obj, type, val) { 
       return GetOrSetCellData(obj, type, val, 16); 
      } 
     }, 
     { 
      'mDataProp': function (obj, type, val) { 
       return GetOrSetCellData(obj, type, val, 17); 
      } 
     }, 
     { 
      'mDataProp': function (obj, type, val) { 
       return GetOrSetCellData(obj, type, val, 18); // entered by 
      } 
     }, 
     { 
      'mDataProp': function (obj, type, val) { 
       return GetOrSetCellData(obj, type, val, 19); // prioritization sorting 
      } 
     } 
    ], 
    'aaSorting': [[5, 'asc']], 
    'bAutoWidth': false, 
    'sPaginationType': 'full_numbers', 
    'oLanguage': { 
     'sLengthMenu': 'Show _MENU_ Products per page', 
     'sEmptyTable': 'No items in this queue.', 
     'sInfoEmpty': 'Showing 0 to 0 of 0 Items', 
     'sInfoFiltered': '(filtered from _MAX_ total Items)', 
     'sInfo': 'Showing _START_ to _END_ of &nbsp;&nbsp;&nbsp;<b>_TOTAL_ Total Items in Queue</b>' 
    }, 
    'bPaginate': true, 
    'bStateSave': false, 
    'iDisplayLength': 15, 

    "bFilter": true, 
    'bServerSide': !useGetAllItems, 
    'bProcessing': false, 

    'bDeferRender': true, 

    'sAjaxSource': '/SalesModule/Orders/OrderProduct.asmx/GetOrderProductQueueEntries', 
    'sAjaxDataProp': 'QueueEntries', 

    'fnServerData': function (sSource, aoData, fnCallback, oSettings) { 
     aoData.push({ name: 'viewType', value: ViewType }); 
     aoData.push({ name: 'queueType', value: QueueType }); 

     // for server loading 
     var pageIndex = Math.ceil(oSettings._iDisplayStart/oSettings._iDisplayLength) + 1; 
     var txSearch = $.trim($('#txSearch').val()); 

     aoData.push({ name: 'txSearch', value: txSearch }); 
     aoData.push({ name: 'pageIndex', value: pageIndex }); 
     aoData.push({ name: "useGetAllItems", value: useGetAllItems }); 

     // Filters if any 
     var arrQueueFilters = []; 
     for (var i = 9; i <= 18; i++) 
      arrQueueFilters.push($("#ddlQueueFilter_" + i).val()); 
     aoData.push({ name: "arrQueueFilters", value: arrQueueFilters }); 

     if (useGetAllItems) { 
      aoData.push({ name: "iDisplayStart", value: "0" }); 
      aoData.push({ name: "iDisplayLength", value: "15" }); 
      aoData.push({ name: "sEcho", value: "1" }); 
      aoData.push({ name: "sColumns", value: "0" }); 
      aoData.push({ name: "iColumns", value: "0" }); 
      aoData.push({ name: "iSortCol_0", value: "0" }); 
      aoData.push({ name: "sSortDir_0", value: "0" }); 
     } 
     $.ajax({ 
      'type': 'POST', 
      'url': sSource, 
      'data': GetSerializedJsonParams(aoData, ['viewType', 'queueType', 'txSearch', 'arrQueueFilters', 
        'useGetAllItems', 'pageIndex', 'iDisplayStart', 'iDisplayLength', 
        'sEcho', 'sColumns', 'iColumns', 'iSortCol_0', 'sSortDir_0']), 

      'contentType': 'application/json; charset=utf-8', 
      'dataType': 'json', 
      'success': function (data, textStatus, xmlHttpRequest) { 
       // Add 2 properties to each source data object . These will be used later (in mDataProp function) to store dynamically rendered HTML 
       for (var i = 0; i < data.d.QueueEntries.length; i++) { 
        data.d.QueueEntries[i]._Display = {}; 
        data.d.QueueEntries[i]._Sort = {}; 
       } 
       hideUpdatingBox(); 
       fnCallback(data.d); 
      }, 
      'error': function (jqxhr, textStatus, errorThrown) { 
       alert('Failed to retrieve queue results from server.'); 
      } 
     }); 
    }, 
    'sDom': 'fr<"dataTables_length_toolbar"T>ltip', 
    'oTableTools': { 
     'sSwfPath': '/js/jQuery.TableTools.Plugin/swf/copy_csv_xls_pdf.swf', 
     'aButtons': [ 
     'print', 
     { 
      'sExtends': 'pdf', 
      'mColumns': [0, 1, 2, 3, 4, 5], 
      'sPdfOrientation': 'landscape' 
     } 
     ] 
    }, 
    'fnRowCallback': function (nRow, rowObj, iDisplayIndex, iDisplayIndexFull) { 
     // Add/replace <tr> id w/ format: 'qrow_{opID}' 
     $(nRow).attr('id', 'qrow_{0}'.format(rowObj.Id)); 

     // All the queue classes that we support 
     var allQueueColors = '{0}-{1}Red {0}-{1}Orange {0}-{1}Yellow'.format('queue', 'gradient'); 

     // Remove any existing <tr>, <td> queue color classes, <tr> queue-main class 
     $(nRow).removeClass('{0} {1}'.format(allQueueColors, 'queue-parentrow 3')); 
     $('td:eq(5)', nRow).removeClass(allQueueColors); 

     // Add <tr> and <td> queue color classes 
     $(nRow).addClass('{0} {1}'.format(rowObj.QueueColor, 'queue-parentrow')) 
     $(nRow).addClass('{0} {1}'.format(rowObj.QueueColor, 'userId_'+ rowObj.EnteredByUsername)) 
     $('td:eq(5)', nRow).addClass(rowObj.QueueColor); 
     return nRow; 
    }, 
    'fnInitComplete': function (oSettings, json) { 
     $('#divTblLoading').hide(); 
     $('#tblQueue').fadeIn(); 
     $('#divQueueColorLegend').show(); 

     InitCountdownTimer(); 
     QueuePrioritization.OutputModal(); 

     // run filters on auto-refresh 
     if (useGetAllItems) { 
      InitQueueApplySelectedFilters(); 
     } 
    }, 
    "fnDrawCallback": function (oSettings) { 
     InitLightboxProofs(); // function in queue_page.js 
     hideUpdatingBox(); 
    } 
}); 
+0

verwenden Sie Filter? –

+0

Ja, aber in diesem Fall ist keiner der Filter aktiviert. Die 15, 30 und 50 funktionieren alle, nur wenn ich zu -1 (alle) wechsle, entscheidet es, dass es keine passenden Datensätze gibt. – NocFenix

+1

kann ich einen Code haben? –

Antwort

0

Okay, es stellt sich heraus, dass das Problem überhaupt nicht mit den JS Tables war. Im Grunde gibt es eine Menge Back-End-Datenverarbeitung auf dem Server, und wenn dies bei über 1000 Datensätzen versucht wird, würde die AJAX-Anforderung eine Zeitüberschreitung aufweisen, bevor der Server eine Antwort zurückgeben könnte. Meine Lösung war, kein ALL Drop-Down zu haben, sondern maximal 1.000.

Verwandte Themen