So scrollen Sie während der Paginierung in jQuery DataTables zur ersten Zeile

Ich bin neu in DataTables und verwende es, um den Inhalt anzuzeigen, den ich von der Datenbank bekomme.So scrollen Sie während der Paginierung in jQuery DataTables zur ersten Zeile

Ich kann nicht zum Anfang der Seite oder zur ersten Zeile blättern, wenn ich auf Seitenumbrüche unten auf der Seite klicke.

$.ajax({ 
contentType : 'application/x-www-form-urlencoded; charset=UTF-8', 
type: "GET", 
url: "xyz", 
data: dataString, 
async: "false", 
datatype: "json", 
success: function(response) { 

     writeResultTable(); 
     var obj = parseJSONfromSearch(response); 

     $('#tableId').DataTable({ 
      data: obj, 
      "bJQueryUI": true, 
      "bPaginate" : true, 
     "sPaginationType" : "simple", 
     "bServerSide": false, 
     "fixedHeader": true, 
      columns : [ 
         { "targets": [0], 
          "sortable" : true, 
          "render":function(data, type, full, meta){ 
           return '<a href="'+full.url+'" target="_blank">' + full.TitlePath + '</a>' + "<br\>" + "<br\>" +                                             full.Description; 

          }} 

        ], 
        "sDom" : '<"top"l<"divline"ip>>rt<"bottom"<"divline"ip>><"clear">', 
      "sAutoWidth" : true, 
      "fnDrawCallback": function(o) { 

        moveToTop(); 



      } 
    });

error: function(response, status, error) { 
     alert("error123"); 
     alert(status); 
     alert(error); 

    } 
}); 

function moveToTop(){ 
window.scrollTo(0, 0); 
}

Ich habe versucht, einige Dinge wie unten aber nichts funktioniert: -

function paginateScroll() { 
$('html, body').animate({ 
scrollTop: $(".dataTables_wrapper").offset().top 
}, 500); 
console.log('pagination button clicked'); 
$(".ui-button").unbind('click', paginateScroll); 
$(".ui-button").bind('click', paginateScroll); 
} 
paginateScroll();

Quelle

2017-05-29 nehag

Ist das, was Sie wollen? - https://stackoverflow.com/questions/21609257/jquery-datatables-scroll-to-top-when-pages-clicked-from-bottom – ParaBolt

Ich habe versucht fast alles auf dieser Seite/Seite, aber nichts funktioniert. Ich weiß nicht, wo ich einen Fehler mache. :( – nehag

@ParaBolt, yeah, diese Antwort benötigt ein Update. Es zielt auf dataTables 1.9.x, danke für die Erinnerung. – davidkonrad

Sie in JQuery mit scollTop Eigentum und Zeit von Scoll in Millisekunden verwenden .animate können wie folgt

<html> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 

<script> 

function scrollSmooth() 
{ 
    $('html, body').animate({ 
     scrollTop: $("#demo").offset().top 
    }, 1000); 
} 

</script> 

<body> 

<div id="demo" style="background: pink">ScrollTo This</div> 

Sample Data<br /><br><br><br> 
Sample Data<br /><br><br><br> 
Sample Data<br /><br><br><br> 
Sample Data<br /><br><br><br> 
Sample Data<br /><br><br><br> 
Sample Data<br /><br><br><br> 
Sample Data<br /><br><br><br> 
Sample Data<br /><br><br><br> 
Sample Data<br /><br><br><br> 
Sample Data<br /><br><br><br> 
Sample Data<br /><br><br><br> 
Sample Data<br /><br><br><br> 

<button onclick="scrollSmooth()">Click</button> 

</body> 
</html>

Quelle

2017-05-29 13:00:17 Raj

Versucht, aber nicht funktioniert. Nur um hinzuzufügen, ich rufe eine JavaScript-Funktion in der FnDrawCallback von Jquery Datatable. " "fnDrawCallback": function (o) { \t \t \t \t \t \t \t \t \t \t \t \t moveToTop(); \t \t \t \t \t \t \t \t \t \t} function moveToTop() { \t \t \t \t \t $ ('html, body') animieren ({ \t scrollTop:.. $ ("# ID_2") Offset() oben \t. }, 1000); } 'wobei id_2 das div ist, das die Datentabelle enthält. – nehag

Am einfachsten wäre es, sich in das Ereignis page.dt einzuloggen. Wenn Sie eine Datatable haben:

var table = $('#example').DataTable({}) ;

Dann könnten Sie dies tun:

table.on('page.dt', function() { 
    $('html, body').animate({ 
    scrollTop: $(".dataTables_wrapper").offset().top 
    }, 'slow'); 
});

Demo ->http://jsfiddle.net/wq853akd/

Wenn Sie explizit ersten Zeile blättern möchten, und nicht nur oben auf der .dataTables_wrapper, verwenden Sie stattdessen diese Auswahl:

scrollTop: $(".dataTables_wrapper tbody tr:eq(0)").offset().top

Demo ->http://jsfiddle.net/wq853akd/1/

Quelle

2017-05-29 22:12:33 davidkonrad

Hallo David, Ja endlich kann ich das Problem lösen. Die Art, wie ich das Problem gelöst ist, ich eine Javascript-Funktion von fnDrawCallback "fnDrawCallback" genannt: function (o) { \t \t \t \t \t \t \t moveToTop(); \t \t \t \t \t \t \t \t} und innerhalb dieser Funktion bekomme ich nur die ID des div die die Tabelle enthält und bewegt es nach oben wie folgt: - var tabelle1 = document.getElementById (‚Inhalt‘); \t table1.scrollTop = 0; – nehag

Vielen Dank für Ihre Hilfe – nehag

So scrollen Sie während der Paginierung in jQuery DataTables zur ersten Zeile

Antwort

Verwandte Themen