large odata pull

by merganser

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="div1">

<ul id="sortable1">

</ul>

</div>

<div id="div2">
<ul id="nonsortable1">

</ul>
</div>

CSS

div {
    overflow: scroll;
    float: left;
}
#div1 {
    height : 200px;
    width: 200px;
}
#div2 {
    height : 200px;
    width: 200px;
    margin-left: 50px;
}

li{width:200px;margin-bottom:2px;}
.slim{
  
  background-color:black;
    height: 1px;                        /* be sure to set height & width */
    width:  200px;

    /* Hide the text. */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    
}

JavaScript

$(document).ready(function(){

/*http://data.consumerfinance.gov/api/views.json*/
$.getJSON( "https://data.consumerfinance.gov/resource/jhzv-w97w.json", function( data ) {
$.ajaxSetup({ cache: true });
  var items = [];
  
  $.each( data, function( key, val ) {
    items.push( //val
    "<li id='" + key + "' class='ui-state-default'>" + val.company +" - " +val.date_sent_to_company+ "</li>" 
    );
  });
$('#sortable1') 
  .append(items.join("")
  );
$('#nonsortable1') 
  .append(items.join("")
  );
  		$( "#sortable1" ).sortable({
        items: "li:not(.ui-state-disabled)"
        ,start: function(event,ui){
          
          //$( "li:not('.ui-sortable-helper')" ).css( "background-color", "yellow" );
          //$( "li.ui-sortable-handle" ).css( "background-color", "yellow" );
          $( "li.ui-sortable-handle" ).addClass("slim");
          ui.item.removeClass("slim");
        } ,stop: function(event,ui){
         
         $( "li.ui-sortable-handle" ).removeClass("slim");
         
        }
      });

      $( "#sortable1 li" ).disableSelection();
var $divs = $('#div1, #div2');
var sync = function(e){
    var $other = $divs.not(this).off('scroll'), other = $other.get(0);
    var percentage = this.scrollTop / (this.scrollHeight - this.offsetHeight);
    other.scrollTop = percentage * (other.scrollHeight - other.offsetHeight);
    setTimeout( function(){ $other.on('scroll', sync ); },10);
}
$divs.on( 'scroll', sync);
  
});

/*$( "<ul/>", {
    "class": "my-new-list",
    html: items.join( "" )
  }).appendTo( "body" );var  source = new $data.yourOdataContext({serviceUri:"http://data.consumerfinance.gov/api/views.json"});

source.Titles
  .take(5)
  .forEach( function(catalog) { 
  
  
  render(catalog); 
  
  
  });
  */
  
  
  /*
todoDB.Todos
        .include("Person")
        .forEach(function(todo) {
            $('#todos')
                .append('<li>' + todo.Task + ',' + todo.Person.Name + '</li>');
        });*/
        
});