0

I am using custom component, that component controller called jquery-1.11.3.min.js. after that i called jquery-1.11.1.min.js for datatables. If i removed jquery-1.11.1.min.js file datatables not working properly. If i use component at the end of the document datatable not displaying the paginations. All records displaying in in the same page. here is the my code.

<apex:stylesheet value="{!URLFOR($Resource.Jquery_sumo_select, '/sumoselect.css')}"/>
<apex:includeScript value="{!URLFOR($Resource.Jquery_sumo_select, '/jquery.sumoselect.min.js')}" /> 

<script>
    j$ = jQuery.noConflict();

    j$.extend( j$.fn.dataTableExt.oSort, {
        "point-numeric-pre": function ( a ) {
            var vals = a.match(/([0-9]+[\.]+[0-9]+([\.]+[0-9]+)?)/g);
            var res = [0, 0, 0];

            if (vals) {
                vals = vals[0].split('.');
                for (var i = 0; i < vals.length; i++) {
                    res[i] = parseInt(vals[i]);
                }
            }    
            return 1000000*res[0] + 1000*res[1] + res[2];
        },

        "point-numeric-asc": function ( a, b ) {
            return ((a < b) ? -1 : ((a > b) ? 1 : 0));
        },

        "point-numeric-desc": function ( a, b ) {
            return ((a < b) ? 1 : ((a > b) ? -1 : 0));
        }
    });

    j$(document).ready( function () {
        var aa = j$('[id$="resultTable"]').DataTable({
            columnDefs: [
              { type: 'point-numeric', targets: 3 }
            ],
            order: [[ 3, "asc" ]]
        });
         var contactTable = j$('[id$="approvalTable"]').DataTable({
          "bSort": false,
           columnDefs: [
              { type: 'point-numeric', targets: 3 }
            ]
        });
    });

"Uncaught TypeError, Cannot read property oSort of undefined." error message showing.

3

You can isolate your DataTables JavaScript code to its specific version of jQuery by using this pattern:

<script src="... path to jquery-1.11.1 ..."></script>
<script>
(function(j$) {
    ... your Datatables code goes here ...
})(jQuery.noConflict());
</script>

Note that the included jQuery reference and the DataTables script tags need to be right next to each other.

This works because including jQuery in the page changes the definition of $ and invoking jQuery.noConflict() restores the previous value and also returns the current value which in this case is passed into the execution of an anonymous function where you code can use it.

  • Hi Keith, i kept the code inside function like what you said. but no luck. same error message it's showing and pagination not working. – Vijay Kumar May 2 '16 at 12:27
  • @VijayKumar Looks like you'll have to use your browser's debugging tools then; you can set breakpoints and examine data and so hopefully figure out what/why this is broken. – Keith C May 2 '16 at 12:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.