如何覆盖.js文件内容

Question

im using the datatable.js library in my application, but i need to modify certain styles in the datatable.js, its working fine if i directly modify the styles in .js file. Changes looks like below.

/* Sorting */
        "sSortAsc": "ui-state-default_custom",
        "sSortDesc": "ui-state-default_custom",
        "sSortable": "ui-state-default_custom",
        "sSortableAsc": "ui-state-default_custom",

/* Scrolling */
        "sScrollHead": "dataTables_scrollHead ui-state-default_custom",
        "sScrollFoot": "dataTables_scrollFoot ui-state-default_custom",

But this is not recommended as it makes changes directly to lib, is there a way to avoid and override these changes in some other file and use it?

Answer 1

Do it exactly as it is described in the sourcecode :

Extension object for DataTables that is used to provide all extension options.

Note that the DataTable.ext object is available through jQuery.fn.dataTable.ext where it may be accessed and manipulated.

So, if you have a style like this

.my-sorting {
    background-color: red;
}

and you want to use that class in sortable <thead> 's instead of the default "sSortable": "sorting" simply add this before your dataTable() initialization :

jQuery.fn.dataTable.ext.oStdClasses.sSortable='my-sorting';

You can change all of your above mentioned default properties by that, and much more, without changing the original source.

Here is a fiddle with the above example you can test on : http://jsfiddle.net/rbUAq/