Angular and DataTables

FyinInc

I have a JSON/Angular results displaying properly until I try to add DataTables. Once I do this I only get my header. What am I missing?

http://pinpointmeds.fyin.com/test.aspx?s=mi

[code]
$(document).ready(function () {
initialize();
$('#ResultsTable').dataTable();
});
[/code]

HTML:

[code]



Sort by (click a column header below)



Drug Name


Manufacturer


Concentration


Total Amount


Container Type


NDC Number


Wholesale order number


Form






{{s.DrugName}}


{{s.Manufacturer}}


{{s.Concentration}}


{{s.TotalAmount}}


{{s.ContainerType}}


{{s.NDCNumber}}


Mckesson: NA

Cardinal: NA

AmerisourceBergen: NA

Morris Dickson: NA


{{s.ProductForm}}




[/code]

FyinInc

JSON is returning
[code]
[{"Id":12292,"DrugName":"CLINIMIX 2.75/5 sulfite-free (2.75% Amino Acid in 5% Dextrose) Injection","Manufacturer":"Baxter International, Inc.","Concentration":"","TotalAmount":"","ContainerType":"CLARITY Dual Chamber Container","NDCNumber":"0338-1132-03","WholesaleOrderNumber":",,,","McKessonNumber":"","CardinalItemNumber":"","MorrisDicksonItemNumber":"","AmerisourceBergenItemNumber":"","ProductForm":"Solution"},{"Id":12293,"DrugName":"CLINIMIX 2.75/5 sulfite-free (2.75% Amino Acid in 5% Dextrose) Injection","Manufacturer":"Baxter International, Inc.","Concentration":"","TotalAmount":"","ContainerType":"CLARITY Dual Chamber Container","NDCNumber":"0338-1083-04","WholesaleOrderNumber":",,,","McKessonNumber":"","CardinalItemNumber":"","MorrisDicksonItemNumber":"","AmerisourceBergenItemNumber":"","ProductForm":"Solution"},{"Id":12294,"DrugName":"CLINIMIX 4.25/5 sulfite-free (4.25% Amino Acid in 5% Dextrose) Injection","Manufacturer":"Baxter International, Inc.","Concentration":"","TotalAmount":"","ContainerType":"CLARITY Dual Chamber Container","NDCNumber":"0338-1133-03","WholesaleOrderNumber":",,,","McKessonNumber":"","CardinalItemNumber":"","MorrisDicksonItemNumber":"","AmerisourceBergenItemNumber":"","ProductForm":"Solution"}]
[/code]

allan

I haven't used Angular before, but I rather suspect that DataTables 1.9.4 will not be suitable. Indeed, I'm not even sure that 1.10 will be suitable for use with templating in Angular.

Can I ask what you are looking to get from using both DataTables and Angular in the same table, giving that they overlap quite significantly? Is it just the templating aspect that you want? I have done some work on using bindings with Knockout so that aspect is certainly possible (in 1.10 which is currently in development), but we'd need to have events listened to from Angular to say if it is updating the DOM and what it is doing.

It might well do that, but I suspect you'll need a lot more code to do that than you would to just create the table using DataTables. So I guess, as I say, what is it that you are looking to get from using both Angular and DataTables, given that DataTables can display your JSON without any additional plug-ins.

Thanks,
Allan

FyinInc

How do I point it directly to my API? Http://pinpointmeds.Fyin.com/API/search?term=oxy

allan

Under the assumption it is possible to instruct your API to return JSON rather than XML (based upon your previous comment), I've put this example together showing how DataTables can consume that data source:
http://live.datatables.net/elavif/2/edit

Basically it makes use of mData to read data from the source objects (i.e. assign each column a property from the source object), and mRender to format the data (like wrapping span tags around it). The resulting output should be identical to what you have above. I've used sDefaultContent for the second last column since the HTML in the template above for that is static, but the same mRender / mData principle can be used to format data for that column if needed.

The result is that rather than the template being in HTML live the Angular example above, its in Javascript (I do plan on making a template plug-in for DataTables sometime!).

I've also included the fnReloadAjax plug-in in the example which is tied to a button in the document. When the button it clicked the Ajax source for the table is reloaded and displayed. You could put that inter an interval timer if you wanted it updated at regular periods (reloaded Ajax data will have a built in API in 1.10 :-) ).

Let me know if you have any further questions or would like me to explain any aspect of the example in any more detail.

Regards,
Allan