How to lpad (Mustache.Wax.js) or right-justify in Columns 2.0 columns ?

Thx muchly,
Pete

Hi,

First, thank you for sharing your work !
I would like to have a table column displaying 2 differents data keys.
As you are using "mustach" as templating system I set an object {id: objId, name: objName}
and in the column template I use this syntax {{obj.name}} and {{obj.id}} but I also try to sort this column by using the name properties...

According to you, is that possible and how ?

Thanks again.
Wiser

Possible to do no pagination and display all rows ? and suppress
showRows in footer ?
I know it's unconventional but that's what's been requested.
(Volume of result set is not that large).

Thx,
P.

here is the sockets.io event handler that renders json returned from server into the columns plugin.

the top two steps render content and metadata into separate

tags, and the data returned is not the same as the data in the #mongo tag (the mongo tag is stale, and the raw incoming json is up to date).

when i reload the web page, the two data visualizations match.

is there another way to refresh columns with a fresh batch of data? or does the grid only update on document.ready() or onLoad()?

Stack trace snippet:

Columns (jquery.columns.js:382)

...

i.onData (index.js:83)

i.onLoad (index.js:83)

hasXDR.e.onreadystatechange (index.js:83)

other than this issue, you've saved me tons of time in my prototyping...

read well and prosper
michael corning

Is there a way we can format date text being recieved in JSON call (for eg. 2015-06-02T01:18:05.858Z) to be displayed as (02-Jun-2015 06:05 PM) using header template.

Additionally, if above is possible can we have sort on this date column sorts the result as per date and not as text.

Hi,

When I go on your website with my version of Chrome, I don't have any problem seeing all your tables. However, when I create the page on my computer and then visualize on Chrome, I can't see anything. It works on IE and Firefox but not Chrome. I am wondering why.
Second question, I added the folder to an internal server with local links and now, none of the browsers can read the JSON file. any idea, please ?

Thank you a lot for this useful tool,
Alex

Are there any plans to implement ajax paging into columns? We would really like to use this plugin but we need to support db-side paging for extremely large datasets. If there are no plans to implement it, do you have any suggestions on how we might create a plugin for columns that would allow this?

Michael loving Columns and working exceedingly nicely. json data there and schema controlling
which columns shown nicely.
But when query parms are modified and a subsequent ajax issued Columns continues to present
the original data so I search for and find $('#Grid').columns('destroy'); thinking aha Eureka !
But when I try to $('#Grid').columns('destroy'); 404 error shown indicating
mobilize-tables.js missing ???
I've downloaded the .zip from both Git and your site and have not found the piece I'm missing.

Fiddler says:
Detailed Error Information:
Module
IIS Web Core
Notification
MapRequestHandler
Handler
StaticFile
Error Code
0x80070002
Requested URL
http://localhost:53472/lib/vendor/mobilize-tables.js
Physical Path
C:\myDir\lib\vendor\mobilize-tables.js
Request Tracing Directory
C:\Users\myPerson\Documents\IISExpress\TraceLogFiles\MY_DATABASE

What am I doing wrong ?

Also:
How to add thousands separators ? to a numeric column ?

Thx for great code. They like it.

Hi there, is there a way to fix the headers? I tried "hacking" the css thead to fixed, but that looks like crap and doesn't scroll left to right in my div, content scrolls, anyway to do this?

Thanks!

Hi first thanks for the great lib ,
it's very clean and functionnal
I have my data loaded in $('#columns')
but some user action will get new data so I need to reload my table's content
Itried this
$('#columns').columns('setMaster', newData);
and reset
but neither work

I'm probably not doing it right
please shed some light
Thanks

This Lib is very strong for Json data and Ajax,but i have a export requirement now,so how can i do with this lib?

Hello! I am sorry if this was covered somewhere but I can't find an answer.

I am using columns to build some simple data tables, and it seems like the default sort treats everything as a string. so I sort by 'count' DESC (arrow down)

and I get 98, 950, 900, and 90 in that order. I need that to look like 950, 900, 98 and then 90.

Am I right to think that the only way to do this is is to override the default sorting by writing a custom plugin? Or is there a way to specify type in the schema somewhere? Thanks in advance.

I want to begin by saying "Thank you," for a wonderful well documented project.

I am writing because I would like to know whether "... all data is searchable" (default option for searchableField) means that numeric data is searchable too.

I ask because it appears that numeric data is NOT searchable. Is this correct or is it a bug?

To see what I mean I have created a basic page (see below). Everything except the nhs_number is searchable.

@gdvallance

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/classic.css">
</head>
<body>
    <h1>Test</h1>
    <p>A page to demonstrate that numeric data is not searched.</p>

    <div id="patient-list"></div>

    <script src="lib/jquery-1.11.0.min.js"></script>
    <script src="js/jquery.columns.min.js"></script>
    <script>
        // Mock data 
        var data = {
            "record": [
                {
                    "id": 1,
                    "first_name": "Beau",
                    "surname": "Scott",
                    "birthdate": "",
                    "address": "7127 Sociosqu Ave",
                    "postcode": "FN4Y 9GH",
                    "nhs_number": 2147483647,
                    "gender": "Male"
                },
                {
                    "id": 2,
                    "first_name": "Garrison",
                    "surname": "Sheppard",
                    "birthdate": "",
                    "address": "906-7498 Facilisis St.",
                    "postcode": "BD4J 6OX",
                    "nhs_number": 1611531426,
                    "gender": "Male"
                },
                {
                    "id": 3,
                    "first_name": "Erich",
                    "surname": "Crane",
                    "birthdate": "",
                    "address": "231-2271 Curabitur St.",
                    "postcode": "U9G 8WA",
                    "nhs_number": 2147483647,
                    "gender": "Male"
                }
            ]
        };

        // Turn object into an array that Columns can use.
        // The above is an exemplar object returned from a REST call to DreamFactory.

        var report = [];
        for (var i=0; i<data.record.length; i++) {
            report.push(data.record[i]);
        }

        $(document).ready(function () {
            $('#patient-list').columns({
                data: report
            });
        });
    </script>
</body>
</html>

Hello, every time I reload the table using 'destroy' and then click on a column in the table t.$el.on("dblclick", ".me-data-grid__row", function(n)..., I get a duplicate entry. If I reload the table twice, the function t.$el.on("dblclick", ".me-data-grid__row", function(n) { gets executed three times.

What could be causing this?

Hi,

I'm pretty new to this, and I was able to get your example working with the inline data (example 1) but for the life of me, I can't figure out how to integrate the ajax example #2 or #3). With the inline example, I was able to integrate it into initialize function, but I have tried everything I can think of and can't get the ajax to work the same way.

Any thoughts to what I'm doing wrong?
Thanks!
Julie

Need to generate the template according to related value type or something else, if template can be attached with a callback, it will be great feature, thanks.

Is there any way to get the columns data after the filter has been applied. as per the documentation getRows return only the current page rows, How to extract all rows after filter has been applied.

It would be great to add a function call to the template so we can modify blank values or convert boolean values so they work with search and sort.

Hi,
I am having a problem when using with a multidimensional array object. Is it possible to use this js library with Json object as below.

[ {"id":"31","Mesial":{"disorder":"","other":""},"Facial":{"disorder":"DC-HP","other":""},"Distal":{"disorder":"","other":""},"Lingual":{"disorder":"","other":""},"Occlusal":{"disorder":"","other":""}} ,{"id":"37","Mesial":{"disorder":"","other":""},"Facial":{"disorder":"RE-AR","other":""},"Distal":{"disorder":"","other":""},"Lingual":{"disorder":"","other":""},"Occlusal":{"disorder":"","other":""}} ]

I am trying to use it with jQuery 1.12.1 but it isn't working

Here is my code

<script>

$(function(e) {

    $('#CampaignMenu').change(function(e) {

        if (  $(this).val() != '0') {
            $('#DisplayReport').attr('disabled', false);
        } else {
            $('#DisplayReport').attr('disabled', true);
        }

    });

    $('#DisplayReport').click(function (e) {

        $.ajax({
            type: 'GET',
            url: '/get/data',
            data: {'campaign_id': $('#CampaignMenu').val() },
            dataType: 'json',
            success: function (json) {
                console.log(json);  //this reports the data
                $('#report').columns({
                    data: json,
                });
            }
        });

    });

});

</script>

<div class="wrapper">

<form class="form-inline">

    <div class="form-group">

        <select name="campaigns" id="CampaignMenu" class="form-control">

                <option value="0" selected>Please Select A Campaign</option>
                <option value="1">Name 1</option>
                <option value="2">Name 2</option>

        </select>

    </div>

        <button type="button" class="btn btn-primary" id="DisplayReport" disabled="disabled">Display Report</button>

</form>

</div>

<div id="report"></div>

This is the error that I get

TypeError: $(...).columns is not a function

.success()
AccountQuotaDashboard:66
x.Callbacks/c()
jquery-1.10.2.min.js:21
x.Callbacks/p.fireWith()
jquery-1.10.2.min.js:21
k()
jquery-1.10.2.min.js:23
.send/r()
jquery-1.10.2.min.js:23

I am sure I am included the jquery.column.min.js file as I was able to open it using browser's code source

Here is my head tags

<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/resources/css/generic.css" rel="stylesheet" type="text/css" />

<script src="~/Scripts/modernizr-2.6.2.js"></script>

<script src="~/resources/plugins/bundles/jQuery/jquery.min.js"></script>


<script src="~/resources/plugins/bundles/columns/jquery.columns.min.js"></script>
<link href="~/resources/plugins/bundles/columns/classic.css" rel="stylesheet" type="text/css" />

page size is not configurable

my Code:

$.ajax({
type: "post",
url: "Ajax_Actions/Rep_AjaxActions.aspx/GetLookupData2",
data: "{'EncryptedUserID':'" + EncryptedUserID + "'," +
"'LangSuffix':'" + LangSuffix + "'," +
"'EntityTable':'" + EntityTable + "'," +
"'FilterValue':'" + FilterValue + "'," +
"'Status':'" + Status + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (json) {
try {
var jsondata = json.d;
div_mohdata = $('#div_mohdata').columns({
data: jsondata,
});
} catch (ex) { $.unblockUI(); alert(ex.message);}
$.unblockUI();
},
failure: function () {
alert("error")
$.unblockUI();
}
});

At this point
div_mohdata = $('#div_mohdata').columns({
data: jsondata,
});

I am getting error "String is not a function. "

When i use the first example( inline json data) of your examples section it works fine but the same data is giving error when bought from external source in the above manner, " String is not a function";

Please help me I am new to jquery with very little debugging skills.

Regards

Khan.

Not really an issue, just wondering if there a way to invoke the sort outside of the headers? Like have the table on the page in a right div and a menu to the left for sorting? You could still click "First Name" on the header (which works fine) then ALSO click a button to sort by First Name too..?

Again, thank you so so much for your time!!

[
{
"bb": {
"desc": "敵全体に炎属性５連ダメージ",
"hit dmg% distribution": [
20,
20,
20,
20,
20
],
"hit dmg% distribution (total)": 100,
"hits": 5,
........
Let say, if I wanted to pull "desc" from "bb" nested object. What should it be done? Or does this feature supported for now? I would like it become like : Column header ; "BB description" and the content will be ("bb";"desc" ) Thanks for your great work!!

Hello, is there a way to multi-sort columns at the moment? or a future release? thanks.

Hello,

is it possible to address an external URL or API? I'm afraid I can't find a way.

z. B: https://api.hotslogs.com/Public/Players/1/Benthor_1644

I'm hoping for an answer.
Thank you

My result rows are greater than 50, but when I use the showRows option, I get this error:

jquery-3.5.1.min.js:2 jQuery.Deferred exception: Cannot use 'in' operator to search for 'length' in 50 TypeError: Cannot use 'in' operator to search for 'length' in 50 at p (https://patentory.com/static/js/jquery-3.5.1.min.js:2:1077)
at Function.each (https://patentory.com/static/js/jquery-3.5.1.min.js:2:2937)
at i (https://patentory.com/static/js/columns/js/jquery.columns.min.js:9:2682)
at t.create (https://patentory.com/static/js/columns/js/jquery.columns.min.js:9:3166)
at t.init (https://patentory.com/static/js/columns/js/jquery.columns.min.js:9:5055)
at new t (https://patentory.com/static/js/columns/js/jquery.columns.min.js:9:5125)
at HTMLDivElement. (https://patentory.com/static/js/columns/js/jquery.columns.min.js:9:434)
at Function.each (https://patentory.com/static/js/jquery-3.5.1.min.js:2:2976)
at S.fn.init.each (https://patentory.com/static/js/jquery-3.5.1.min.js:2:1454)
at S.fn.init.e.fn.columns (https://patentory.com/static/js/columns/js/jquery.columns.min.js:9:372) undefined

If I remove the showRows option, it works fine and displays the default 5 rows. When I select 50 rows from the ui menu it also works properly.

Any thought to making Columns 2.0 accessible to the visually or otherwise impaired ?

First of all thanks for the great library and the support I got from you in my previous post.

What I would like to do is apply paging and removing paging using jquery.

Just for try I tried this.

$('#ui-table-data').columns('paginating ', true);

where "ui-table-data" is the ID of the html table created by the library

(obviously I added this ID to get hold of the table in the library file ).

Please let me know how the above can be achieved using jquery or any other way at client side.

Regards

Anees khan.

Is there a way to hide a column of data? Lets say you want to have a code for a product in the data but you do not want it displayed? It is in your schema and JSON but not displayed on the columns?

How to right justify numerics ?

Thank you