Column Size -Resizable columns - Changing localization at runtime - "Pin" columns when scrolling

AndersHP

Hi,

I just started using this awesome library, but after going though the examples and plugins, i still don't know how to add some behavior which is important to my application.

I am new to web development, and Javascript most of all. So some of this might be doable without using DataTables.

What i need:

1. The column sizes in the table on this page seems to fit the content: https://datatables.net/examples/basic_init/zero_configuration.html However mine doesnt, and this makes the table wider than needed with all the blank spaces. I use the exact same table attributes.

2. Resizable columns - how would i achieve this? I searched and saw some old posts, but nothing really useful

3. Change localization at runtime - i set the language in the constructor, but i need to be able to change it at runtime by clicking a button which is not a part of the DataTables setup. Please help me with the syntax for calling the method to set the language with a file like "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json"

4. Pin column - Is it possible to "Pin" a column. For example, pin the first column so that it's always visible even though the user scrolls right?

---

Html

<link rel="stylesheet" type="text/css" href="~/Content/DataTables/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="~/Scripts/DataTables/jquery.dataTables.js"></script>
....
<table cellspacing="0"  width="100%" id="example" class="display compact">

... thead, tfoot, tbody omitted

---

JS

<script>

    // Called when page is ready
    $(document).ready(function () {
        // Setup - add a text input to each footer cell
        $('#example tfoot th').each(function () {
            var title = $('#example thead th').eq($(this).index()).text();
            $(this).html('<input type="text" placeholder="Søg ' + title + '" />');
        });

        // DataTable, adding funtionality to tabled with id "example"
        var table = $('#example').DataTable({
            scrollX: true,
            "columnDefs": [ {
                "targets": 0,
                "data": null,
                "defaultContent": "<button>Click!</button> <button>Click!</button> <button>Click!</button>"
            } ],
            "language": {
                "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Danish.json"
            }
        });

        // Apply the search
        table.columns().every(function () {
            var that = this;

            $('input', this.footer()).on('keyup change', function () {
                that
                    .search(this.value)
                    .draw();
            });
        });
    });
</script>

tangerine

1. Do you mean you have copied the example exactly, but are getting a different "look"?
   If so, check that you are referencing the style files correctly.
2. I don't believe there is a "resize" plugin.
3. Pass.
4. https://www.datatables.net/extensions/fixedcolumns/

AndersHP

Thank you for your response.

Regarding @1

I didnt copy the example. I have a table exactly similar to the table used. And i initialised the datatables like the example does.

I only add jquery.dataTables.css to the html page - shouldnt that be enough?

allan

1) We would really need to be able to see the page to debug the issue.

3) There is no option to change the language after initialisation. If you need to change the language you would need to destroy the table (destroy()) and then create a new one with the options you want.

Allan